如果使用 SliverStack，如何使小部件位于屏幕底部？

Posted 2023-02-23

【中文标题】如果使用 SliverStack，如何使小部件位于屏幕底部？

【英文标题】：how to make a widget to be on the bottom of the screen if using SliverStack?

【发布时间】：2021-10-21 21:16:55

【问题描述】：

如上图所示，我在顶部（应用栏正下方）有一个红色容器棒。这是我使用的代码

  CustomScrollView(
      slivers: [
          SliverAppBar(),
          _buildStack(),
      ]
  ),

 
  
  Widget _buildStack() 
    return SliverStack(
       children: [

        // I have other widgets here ..

        SliverPositioned(
          bottom: 0, // <-- I have set the bottom to be zero
          child: SliverToBoxAdapter(
            child: _buildRedBox(),
        ),
     
     ],
   )
 
  

  Widget _buildRedBox() 
    return Container(
      width: double.infinity,
      height: 50,
      color: Colors.red,
    );
  

我正在使用sliver tool package，所以我可以访问SliverStack 和SliverPositioned。

如您所见，我已将底部设置为零。但是红色的框仍然在顶部。我需要在我的 SliverStack 内制作屏幕底部的红色框。该怎么做？

【参考方案1】：

使用 SliverFillRemaining 小部件而不是 SliverPositioned 小部件。

SliverFillRemaining 会自动调整大小以填充最后一个列表项底部和视口底部之间的空间

SliverFillRemaining(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          _buildRedBox(),
        ],
      ),
    ),