将尾随小部件推到 Flutter Navigation Rail 的底部

Question

如何将 Flutter Navigation Rail 中的尾随 widget 推到导轨底部？我认为这就像用扩展小部件包装尾随小部件一样简单，但我收到了常见的颤动需要油漆错误消息。

如果我添加一个

Column

以及具有固定高度的

SizedBox

的第一个子元素，然后添加我想要显示的小部件，我就可以让它工作，但我需要 spacer 来填充可用空间，而不是固定高度。这是

SizedBox

的示例，它确实填充了 200px 的空间，但是我如何让它填充可用空间？

// other navrail properties....

     trailing: Column(
        children: [
          SizedBox(
            height: 200,
          ),
          IconButton(icon: Icon(Icons.settings), onPressed: () {})
        ],
      ),

Answer 1

使用“扩展”和“对齐”小部件：

NavigationRail(
  selectedIndex: _selectedIndex,
  destinations: _destinations,
  trailing: Expanded(
    child: Align(
      alignment: Alignment.bottomCenter,
      child: Padding(
        padding: const EdgeInsets.only(bottom: 8.0),
        child: IconButton(icon: const Icon(Icons.help), onPressed: (){}),
      ),
    ),
  ),
);

Answer 2

我找到了解决方案（或解决方法）：

将

NavigationRail

和

Positioned

小部件放入

Stack

:

  Scaffold(
    body: Row(
      children: [
        Stack(
          children: [
            NavigationRail(
              selectedIndex: _selectedIndex,
              extended: Styling.isLargeScreen(context),
              destinations: _destinations
                  .map((d) => d.toNavigationDestination)
                  .toList(),
              onDestinationSelected: (index) => _onItemTapped(index),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                color: Colors.amber,
                height: 100,
              ),
            )
          ],
        ),
        Expanded(
          child: _buildPage(_destinations.elementAt(_selectedIndex).key),
        ),
      ],
    ),
  );

希望尽快修复！

Answer 3

我尝试了里卡多的答案，我将一个小部件放在

NavigationRail

的中心。

在

NavigationRail

内部，它使用

Column

，这是放置目的地和尾随的地方。如您所知，

crossAxisAlignment

的

Column

的默认值为

crossAxisAlignment.center

。

但我希望我的小部件从左侧对齐，下面工作正常。

Row(
  children: [
    // left area
    Column(
      // You can choose start, center, left.
      // baseline, strech results runtime error!
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // NavigationRail
        Expanded(
          child: NavigationRail(
            selectedIndex: _selected,
            destinations: _destinations,
          ),
        ),
        // bottom
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text('bottom-left text'),
        )
      ],
    ),
    // right area
    Expanded(
      child: _content,
    ),
  ],
)