Flutter中Row内容器无法保持等宽等高的问题求助

我试过多种方法都没满足需求：想让Row中的多个容器保持相同的宽度和高度，但使用Expanded会将子组件撑满整个布局，不符合预期；我需要的是类似MainAxisAlignment.spaceAround的均匀对齐效果，而使用SizedBox会导致应用失去响应式特性。

代码结构说明 #

1. Row容器布局：

Flexible(child: Row(mainAxisAlignment : MainAxisAlignment.spaceAround, children:
    categories(textList: [['EK-FİİL YOK', 'a'], ['İSMİ YÜKLEM YAPMA', 'b'], ['BİRLEŞİK ZAMAN KURMA', 'c']],
        callback: callback, category: horizontalCategory),))

2. 批量生成容器：通过循环生成带DragTarget的容器，horizontalCategory(element[0])返回单个Container组件：

List<Widget> categories({required List<List<String>> textList, required Function callback}) {
  List<Widget> containers = [];
  for (var element in textList) {
    containers.add(DragTarget<DraggableText>(
      builder: (
          BuildContext context,
          List<dynamic> accepted,
          List<dynamic> rejected,
      ) => horizontalCategory(element[0])
      , onAccept: (DraggableText data) {
        callback(data, element[1]);
    }));
  }
  return containers;
}

3. 单个容器实现：

Widget horizontalCategory(String text) {
  return Container(
    decoration: BoxDecoration(
      borderRadius: const BorderRadius.all(Radius.circular(8)),
      border: Border.all(width: 2,color: Colors.blueGrey),
      color: Colors.lightBlue.withOpacity(0.04),
    ),
    padding: const EdgeInsets.symmetric(horizontal: 8),
    child: Center(
      child: Text(
        text, style: const TextStyle(fontWeight: FontWeight.bold, ), textAlign: TextAlign.center,
      ),
    ),
  );
}

效果对比 #

• 预期效果：所有容器宽度、高度完全一致，呈现均匀分布的整洁布局
• 实际效果：容器宽度随内部文本长度变化，宽窄不一，布局杂乱

解决方法 #

步骤1：用Flexible均分空间 #

给每个生成的DragTarget外层包裹Flexible(flex: 1)，让每个容器占据Row内相等的可用空间，同时保留响应式特性：

List<Widget> categories({required List<List<String>> textList, required Function callback}) {
  List<Widget> containers = [];
  for (var element in textList) {
    containers.add(Flexible(
      flex: 1,
      child: DragTarget<DraggableText>(
        builder: (
            BuildContext context,
            List<dynamic> accepted,
            List<dynamic> rejected,
        ) => horizontalCategory(element[0]),
        onAccept: (DraggableText data) {
          callback(data, element[1]);
        },
      ),
    ));
  }
  return containers;
}

步骤2：让容器填满分配的空间 #

修改horizontalCategory中的Container，设置width: double.infinity，确保容器填满Flexible分配的宽度：

Widget horizontalCategory(String text) {
  return Container(
    width: double.infinity, // 强制容器填满可用宽度
    decoration: BoxDecoration(
      borderRadius: const BorderRadius.all(Radius.circular(8)),
      border: Border.all(width: 2,color: Colors.blueGrey),
      color: Colors.lightBlue.withOpacity(0.04),
    ),
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12), // 增加垂直padding优化高度
    child: Center(
      child: Text(
        text, 
        style: const TextStyle(fontWeight: FontWeight.bold), 
        textAlign: TextAlign.center,
      ),
    ),
  );
}

步骤3（可选）：强制所有容器高度一致 #

如果需要完全统一高度（即使文本行数不同），用IntrinsicHeight包裹Row，让所有子组件高度匹配最高的那个：

Flexible(
  child: IntrinsicHeight(
    child: Row(
      // mainAxisAlignment: MainAxisAlignment.spaceAround, // 此时可移除，Flexible已均分空间
      children: categories(textList: [['EK-FİİL YOK', 'a'], ['İSMİ YÜKLEM YAPMA', 'b'], ['BİRLEŞİK ZAMAN KURMA', 'c']],
          callback: callback, category: horizontalCategory),
    ),
  ),
)

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