Flutter 如何在含ListView的页面底部添加固定锚点按钮 不使用Scaffold bottomSheet

问题原因 #

你当前的代码没有给ListView.builder设置高度约束，在_myWidget返回的Column中，列表和按钮都会按照自身内容高度排列，无法让按钮固定在Column底部。

解决方案 #

将ListView.builder和它上方的Container共同用Expanded包裹，让这部分内容占用Column中除了底部按钮之外的所有可用空间，按钮就会自动固定在底部，该方案完全在你现有的_myWidget内部实现，和ListView处于同一上下文，不需要调用Scaffold的底部相关参数：

Widget _myWidget(){
  return Expanded(
    child: Column(
      children:[
        // 上方所有内容用Expanded包裹，占满除按钮外的剩余空间
        Expanded(
          child: Column(
            children: [
              Container(),
              ListView.builder(
                shrinkWrap: true,
                physics: const AlwaysScrollableScrollPhysics(),
                /* more_code*/
              ),
            ],
          ),
        ),
        // 按钮会固定在Column底部
        MaterialButton(/* more_code */)
      ],
    ),
  );
}

如果你需要按钮悬浮在列表上层、不占用列表的底部空间，可以改用Stack布局实现：

Widget _myWidget(){
  return Expanded(
    child: Stack(
      children: [
        Column(
          children:[
            Container(),
            Expanded(child: ListView.builder( /* more_code*/ )),
          ],
        ),
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: MaterialButton(/* more_code */),
        )
      ],
    ),
  );
}

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