如何实现列数自动适配的Flutter网格/表格布局？

Flutter 没有原生组件直接实现你要的「类似Wrap但元素垂直上下排列、自动根据内容和空间确定列数」的效果，但可以通过以下两种方式实现：

1. 基于GridView动态计算列数 #

这是最简便的方案：先测量所有Text元素的宽度，找到最宽的那个，再根据可用布局宽度计算能容纳的列数，最后用GridView配合SliverGridDelegateWithFixedCrossAxisCount来实现垂直排列。

示例代码如下：

class DynamicColumnLayout extends StatefulWidget {
  final List<String> texts;
  const DynamicColumnLayout({super.key, required this.texts});

  @override
  State<DynamicColumnLayout> createState() => _DynamicColumnLayoutState();
}

class _DynamicColumnLayoutState extends State<DynamicColumnLayout> {
  int _columnCount = 1;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _calculateColumnCount();
    });
  }

  void _calculateColumnCount() {
    final screenWidth = MediaQuery.of(context).size.width;
    final maxTextWidth = widget.texts.map((text) {
      final textPainter = TextPainter(
        text: TextSpan(text: text, style: DefaultTextStyle.of(context).style),
        textDirection: TextDirection.ltr,
      )..layout(maxWidth: screenWidth);
      return textPainter.width;
    }).reduce((a, b) => a > b ? a : b);
    
    setState(() {
      _columnCount = (screenWidth / maxTextWidth).floor();
      _columnCount = _columnCount < 1 ? 1 : _columnCount;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: _columnCount,
      children: widget.texts.map((text) => Text(text)).toList(),
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
    );
  }
}

这个方案会把所有Text按列垂直排列，列数会根据屏幕宽度和最宽文本的宽度自动调整，和你给出的示例效果一致。

2. 自定义布局组件（CustomMultiChildLayout） #

如果需要更精细的控制（比如列间距、对齐方式的个性化调整），可以用CustomMultiChildLayout自己实现布局逻辑：

• 遍历所有子元素，计算每个元素的宽度，确定最大宽度和列数
• 按列分配每个元素的位置，同一列的元素垂直依次排列
• 通过MultiChildLayoutDelegate定义具体的布局规则

这种方式灵活性更高，但需要手写布局逻辑，适合复杂场景。

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