Flutter中如何在已有的MaterialButton下方添加多个子按钮

核心改动逻辑：你当前代码中Padding的child仅配置了单个MaterialButton，要实现多个按钮纵向排列，只需将单个按钮替换为Column容器，将所有同类MaterialButton放入Column的children列表中即可。

修改后的完整可运行代码如下：

body: SingleChildScrollView(
  child: Padding(
    padding: const EdgeInsets.only(top: 15, bottom: 0, left: 5, right: 5),
    child: Column(
      // 适配SingleChildScrollView，避免占用不必要的垂直高度
      mainAxisSize: MainAxisSize.min,
      // 让所有按钮横向撑满父容器宽度
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 原有第一个按钮
        MaterialButton(
          onPressed: () {},
          child: Container(
            height: 180,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(20.0),
            ),
          ),
        ),
        // 按钮之间的垂直间距，可按需调整数值
        const SizedBox(height: 10),
        // 新增第二个按钮
        MaterialButton(
          onPressed: () {},
          child: Container(
            height: 180,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(20.0),
            ),
          ),
        ),
        const SizedBox(height: 10),
        // 新增第三个按钮，需要更多按钮直接按该格式往下添加即可
        MaterialButton(
          onPressed: () {},
          child: Container(
            height: 180,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(20.0),
            ),
          ),
        ),
      ],
    ),
  ),
)

• 如果所有按钮的样式完全一致，建议封装为独立的复用组件，减少重复代码：

// 封装自定义通用按钮组件
class CustomMaterialButton extends StatelessWidget {
  final VoidCallback onPressed;
  final Color? backgroundColor;
  const CustomMaterialButton({super.key, required this.onPressed, this.backgroundColor});

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      onPressed: onPressed,
      child: Container(
        height: 180,
        width: double.infinity,
        decoration: BoxDecoration(
          color: backgroundColor ?? Colors.grey[300],
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
    );
  }
}

封装后Column的children可以简化为：

children: [
  CustomMaterialButton(onPressed: (){}),
  const SizedBox(height:10),
  CustomMaterialButton(onPressed: (){}, backgroundColor: Colors.blue[100]),
  const SizedBox(height:10),
  CustomMaterialButton(onPressed: (){}),
]

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