Flutter如何将按钮对齐到屏幕底部？支持单双按钮、滚动时位置固定

Flutter 官方提供了原生支持的方案，不需要依赖第三方组件，完美适配全平台屏幕尺寸、安全区，且页面滚动时按钮始终固定：

方案1：使用Scaffold自带的persistentFooterButtons属性（推荐） #

这是最适配原生规范的实现方式，天生支持多按钮布局，自动处理底部安全区、键盘弹起适配，无需手动计算边距：

Scaffold(
  // 原有页面内容不变，支持任意可滚动/固定布局的body
  body: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) => ListTile(title: Text('滚动项$index')),
  ),
  // 底部固定按钮组，可放1个或多个按钮
  persistentFooterButtons: [
    // 双按钮布局示例
    Row(
      children: [
        Expanded(
          child: ElevatedButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('留在当前页'),
          ),
        ),
        const SizedBox(width: 16),
        Expanded(
          child: FilledButton(
            onPressed: () => Navigator.pushNamed(context, '/nextPage'),
            child: const Text('跳转下一页'),
          ),
        ),
      ],
    )
  ],
  // 可选配置：调整按钮组对齐方式
  persistentFooterAlignment: AlignmentDirectional.center,
)

如果是单按钮场景，直接把Row替换为单个按钮组件即可，完全兼容你之前的单按钮需求。

方案2：自定义Stack布局（适用于高定制化需求） #

如果需要自定义按钮区域的背景、阴影、特殊排版，可以用Stack嵌套实现，完全可控布局逻辑：

Scaffold(
  body: Stack(
    children: [
      // 主页面可滚动内容
      Positioned.fill(
        child: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) => ListTile(title: Text('滚动项$index')),
        ),
      ),
      // 底部固定按钮区域
      Positioned(
        left: 0,
        right: 0,
        bottom: 0,
        child: Container(
          // 手动适配底部安全区边距
          padding: EdgeInsets.fromLTRB(16, 12, 16, 12 + MediaQuery.of(context).padding.bottom),
          decoration: const BoxDecoration(
            color: Colors.white,
            boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 4, offset: Offset(0, -2))],
          ),
          child: Row(
            children: [
              Expanded(
                child: OutlinedButton(
                  onPressed: () {},
                  child: const Text('取消'),
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: FilledButton(
                  onPressed: () {},
                  child: const Text('确认'),
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
)

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