Flutter技巧：如何将按钮固定在SingleChildScrollView底部？

问题核心是不能把按钮放在SingleChildScrollView内部，否则它会成为滚动内容的一部分，无法固定在屏幕底部。以下两种方案可以解决你的问题：

方案一：外层Column嵌套滚动区域和按钮栏 #

用外层Column将滚动区域和按钮栏垂直拆分，通过Expanded让滚动区域占据除按钮外的所有屏幕空间：

Scaffold(
  body: Column(
    children: [
      // 滚动内容区：占满剩余屏幕空间
      Expanded(
        child: SingleChildScrollView(
          child: Column(
            children: [
              // 这里放你原来的Column子项
              Text('示例滚动内容1'),
              SizedBox(height: 200),
              Text('示例滚动内容2'),
              SizedBox(height: 200),
              // 更多子项...
            ],
          ),
        ),
      ),
      // 底部固定按钮栏
      Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        color: Colors.white,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: Text('取消'),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('确认'),
            ),
          ],
        ),
      ),
    ],
  ),
);

方案二：利用Scaffold的bottomNavigationBar属性 #

这是更简洁的方案，Scaffold的bottomNavigationBar会自动将内容固定在屏幕底部，还能适配键盘弹出时的位置调整：

Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: [
        // 原来的滚动子项
        Text('示例滚动内容1'),
        SizedBox(height: 200),
        Text('示例滚动内容2'),
        SizedBox(height: 200),
        // 更多子项...
      ],
    ),
  ),
  bottomNavigationBar: SafeArea(
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          ElevatedButton(onPressed: () {}, child: Text('取消')),
          ElevatedButton(onPressed: () {}, child: Text('确认')),
        ],
      ),
    ),
  ),
);

为什么之前的方案无效？ #

你之前尝试的Align、Align+Expanded都是将按钮放在SingleChildScrollView内部的Column里，按钮属于滚动内容的一部分，自然会跟着页面滚动，无法固定在屏幕底部。必须让按钮和滚动区域处于同一层级，或者借助Scaffold的专属布局属性来脱离滚动流。

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