Flutter - 如何将 NavigationRail 标签向左对齐？

Question

我有一个非常简单的 NavigationRail，我正在使用选定和未选定标签的不同字体大小进行测试。当两者保持相同的字体大小时，对齐没有问题，但如果我为所选标签赋予更大的值，或者如果我放置更长的文本，则其他标签显然会对齐到中心。有没有办法控制这种行为，要么全部对齐，要么单独对齐？

这是我的代码：

    return Scaffold(
      appBar: AppBar(
        title: tituloAppBar,
        backgroundColor: colorBackground,
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          SafeArea(
              child: NavigationRail(
            selectedIndex: selectedIndex,
            onDestinationSelected: changeDestination,
            extended: MediaQuery.of(context).size.width >= 850,
            unselectedIconTheme: const IconThemeData(color: Colors.grey),
            destinations: const <NavigationRailDestination>[
              NavigationRailDestination(
                icon: Icon(Icons.search),
                label: Text('Buscar Talleres y Extracurriculares'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.engineering),
                label: Text('Ingeniería y Agronomía'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.business),
                label: Text('Sociales y Administración'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.local_hospital),
                label: Text('Salud'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.school),
                label: Text('Iniciales'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.design_services),
                label: Text('Talleres y Extracurriculares'),
              ),
            ],
            selectedLabelTextStyle:
                TextStyle(color: Colors.lightBlue, fontSize: 20),
            unselectedLabelTextStyle: 
                TextStyle(color: Colors.grey, fontSize: 18),
            groupAlignment: -1,
            minWidth: 56,
          ))
        ],
      ),
    );

我尝试更改每个小部件文本的填充、textAlign 字段。我尝试包装其他小部件来设置填充或边距，但没有任何效果。

Answer 1

基于文档here，不幸的是，当前版本不支持对齐，默认情况下，当

NavigationRailDestination

的宽度大于扩展宽度时，它将居中对齐。

然后，根据该行为，您可以设置扩展 Rail 的值应该比

NavigationRailDestination

更宽

它将对齐开始，见下文：

NavigationRail(
  selectedIndex: selectedIndex,
  onDestinationSelected: changeDestination,
  extended: MediaQuery.of(context).size.width >= 650,
  unselectedIconTheme: const IconThemeData(color: Colors.grey),
  minExtendedWidth: 300, // you must set this property wider than child

通过添加这个

minExtendedWidth: 300,

或更宽，我们会得到这个：

Answer 2

嗨，你只需要用flexible包裹NavigationRail，它就会像这样根据需要工作

这是代码：

return Scaffold(
  appBar: AppBar(
    title: tituloAppBar,
    backgroundColor: colorBackground,
  ),
  body: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Flexible(
        child: NavigationRail(
          selectedIndex: _counter,
          onDestinationSelected: (value) {
            setState(() {
              _counter = value;
            });
          },
          extended: MediaQuery.of(context).size.width >= 850,
          minExtendedWidth: 100,
          unselectedIconTheme: const IconThemeData(color: Colors.grey),
          destinations: const <NavigationRailDestination>[
            NavigationRailDestination(
              icon: Icon(Icons.search),
              label: Text('Buscar Talleres y Extracurriculares'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.engineering),
              label: Text('Ingeniería y Agronomía'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.business),
              label: Text('Sociales y Administración'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.local_hospital),
              label: Text('Salud'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.school),
              label: Text('Iniciales'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.design_services),
              label: Text('Talleres y Extracurriculares'),
            ),
          ],
          selectedLabelTextStyle:
              TextStyle(color: Colors.lightBlue, fontSize: 20),
          unselectedLabelTextStyle:
              TextStyle(color: Colors.grey, fontSize: 18),
          groupAlignment: -1,
          minWidth: 56,
        ),
      )
    ],
  ),
);