Flutter中如何在Container底部放置按钮并实现指定样式的按钮

可通过两种常用方案实现：

• 方案1：Stack组件搭配Align定位

Container(
  height: 300, // 按需设置容器高度
  color: Colors.grey.shade100,
  child: Stack(
    children: [
      // 容器其他内容区域
      const Center(child: Text("内容展示区")),
      // 定位按钮到容器底部
      Align(
        alignment: Alignment.bottomCenter,
        child: // 替换为你的按钮组件
      )
    ],
  ),
)

• 方案2：Column组件搭配Expanded撑满中间区域

Container(
  height: 300,
  color: Colors.grey.shade100,
  child: Column(
    children: [
      // 中间内容区域自动撑满剩余空间
      const Expanded(
        child: Center(child: Text("内容展示区")),
      ),
      // 底部直接放置按钮组件
      // 替换为你的按钮组件
    ],
  ),
)

按钮样式参考：

该样式为左右等分的双按钮，左侧为蓝色填充主按钮，右侧为灰色边框次要按钮，实现代码如下：

Row(
  children: [
    Expanded(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.blue,
          foregroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
          padding: const EdgeInsets.symmetric(vertical: 14),
        ),
        onPressed: () => {},
        child: const Text("Confirm", style: TextStyle(fontSize: 16)),
      ),
    ),
    const SizedBox(width: 16),
    Expanded(
      child: OutlinedButton(
        style: OutlinedButton.styleFrom(
          foregroundColor: Colors.black87,
          side: const BorderSide(color: Colors.grey),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
          padding: const EdgeInsets.symmetric(vertical: 14),
        ),
        onPressed: () => {},
        child: const Text("Cancel", style: TextStyle(fontSize: 16)),
      ),
    ),
  ],
)

将上述按钮组代码替换功能1示例中的按钮位置，即可实现容器底部放置该样式按钮的需求。

内容的提问来源于stack exchange，提问作者Aniekan-abasi Akpakpan