Flutter如何实现4个等宽高Container均等排布且后续支持内容滚动

效果对比 #

• 当前实际效果：
• 预期实现效果：

实现方案 #

你原来的代码没有给子容器设置权重约束，所以容器大小会跟随内容变化，无法均等排布，按下面的方案调整即可满足需求：

方案1：嵌套Row/Column实现（适配自定义布局逻辑） #

Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.all(20.0),
      // 如果需要整个页面支持滚动，将下面的Column套入SingleChildScrollView即可
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 第一行容器
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    // 统一设置容器样式
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    // 容器内部内容超出时滚动
                    child: SingleChildScrollView(
                      child: Row(
                        children: [
                          VerticalText1(),
                          DoBuilder(),
                        ],
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: SingleChildScrollView(
                      child: DecideBuilder(),
                    ),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 10),
          // 第二行容器
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: SingleChildScrollView(
                      child: Row(
                        children: [
                          VerticalText2(),
                          DelegateBuilder(),
                        ],
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: SingleChildScrollView(
                      child: DeleteBuilder(),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

方案2：GridView实现（代码更简洁） #

如果不需要复杂的自定义行列逻辑，直接用GridView两行代码就能搞定均等排布：

Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.all(20.0),
      child: GridView.count(
        crossAxisCount: 2,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        // 调整这个值可以修改容器宽高比，1就是正方形
        childAspectRatio: 1,
        shrinkWrap: true,
        children: [
          Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
            child: SingleChildScrollView(child: Row(children: [VerticalText1(), DoBuilder()])),
          ),
          Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
            child: SingleChildScrollView(child: DecideBuilder()),
          ),
          Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
            child: SingleChildScrollView(child: Row(children: [VerticalText2(), DelegateBuilder()])),
          ),
          Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
            child: SingleChildScrollView(child: DeleteBuilder()),
          ),
        ],
      ),
    ),
  );
}

核心逻辑说明 #

• 用Expanded包裹每个容器区块，自动平分父级的可用宽高，天然保证4个容器尺寸完全一致；如果需要固定容器大小，去掉外层Expanded，直接给Container设置固定的width和height即可。
• 每个容器内部嵌套SingleChildScrollView，后续写入内容超过容器尺寸时自动支持滚动，不会出现溢出报错。

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