使用SliverStack时如何将子Widget固定在屏幕底部？

问题原因 #

SliverPositioned的bottom属性默认是相对于SliverStack的内容边界计算的。如果SliverStack内部其他子组件的总高度小于可视区域高度，SliverStack默认仅包裹内部内容，此时bottom:0对应内容的底部，也就会出现在靠近页面顶部的位置。

解决方案 #

方案1：红色盒子固定在屏幕底部（不跟随滚动） #

直接给SliverPositioned添加relative: false参数，将定位参照物改为屏幕视口而非SliverStack内容边界即可：

Widget _buildStack() {
  return SliverStack(
     children: [
      // 此处省略其他子Widget代码
      SliverPositioned(
        relative: false, // 新增该行参数
        bottom: 0,
        child: SliverToBoxAdapter(
          child: _buildRedBox(),
        ),
      ),
   ],
 );
}

方案2：红色盒子固定在SliverStack内容最底部（跟随内容滚动） #

在SliverStack的子组件最前面加一个SliverFillRemaining，将SliverStack的高度撑开至AppBar之外的所有可视区域，此时bottom:0就会对应可视区域底部：

Widget _buildStack() {
  return SliverStack(
     children: [
      // 新增该行，撑满SliverStack的可用高度
      const SliverFillRemaining(child: SizedBox.shrink()),
      // 此处省略其他子Widget代码
      SliverPositioned(
        bottom: 0,
        child: SliverToBoxAdapter(
          child: _buildRedBox(),
        ),
      ),
   ],
 );
}

内容的提问来源于stack exchange，提问作者Agung