Flutter中2行6按钮无法占满可用空间问题求助

要让按钮占满可用空间，核心是调整OutlinedButton的默认样式——它本身自带内边距且不会自动填充父容器空间。以下是修改后的完整代码：

return Scaffold(
  backgroundColor: Colors.green,
  body: Column(
    children: <Widget>[
      Expanded(
        child: Row(
          children: <Widget>[
            Expanded(
              child: OutlinedButton(
                child: Text('test'),
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  minimumSize: Size.infinite, // 让按钮填充满父容器
                  padding: EdgeInsets.zero, // 移除默认内边距
                  side: BorderSide(color: Colors.red), // 设置边框颜色
                ),
              ),
            ),
            Expanded(
              child: OutlinedButton(
                child: Text('test'),
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  minimumSize: Size.infinite,
                  padding: EdgeInsets.zero,
                  side: BorderSide(color: Colors.blue),
                ),
              ),
            ),
            Expanded(
              child: OutlinedButton(
                child: Text('test'),
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  minimumSize: Size.infinite,
                  padding: EdgeInsets.zero,
                  side: BorderSide(color: Colors.yellow),
                ),
              ),
            )
          ],
        ),
      ),
      Expanded(
        child: Row(
          children: <Widget>[
            Expanded(
              child: OutlinedButton(
                child: Text('test'),
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  minimumSize: Size.infinite,
                  padding: EdgeInsets.zero,
                  side: BorderSide(color: Colors.purple),
                ),
              ),
            ),
            Expanded(
              child: OutlinedButton(
                child: Text('test'),
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  minimumSize: Size.infinite,
                  padding: EdgeInsets.zero,
                  side: BorderSide(color: Colors.orange),
                ),
              ),
            ),
            Expanded(
              child: OutlinedButton(
                child: Text('test'),
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  minimumSize: Size.infinite,
                  padding: EdgeInsets.zero,
                  side: BorderSide(color: Colors.white),
                ),
              ),
            )
          ],
        ),
      )
    ],
  ),
);

关键修改说明： #

• minimumSize: Size.infinite：强制按钮填充父组件分配的所有空间，解决按钮无法占满的核心问题
• padding: EdgeInsets.zero：移除OutlinedButton默认的内边距，让按钮边缘贴合容器边界
• side: BorderSide(color: ...)：自定义边框颜色，满足样式调整需求
• 保留了你原本的Column+Expanded+Row结构，该结构本身可正确分配2行均等垂直空间、每行内3个按钮均等水平空间

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