如何用Flutter的GridView.builder实现动态文本网格？求替代方案

方案一：使用Wrap组件（推荐，适配动态宽高） #

如果你需要子元素根据文本内容自动调整宽高并自动换行，Wrap是最直接的选择，比GridView更适合这种流式自适应场景：

Wrap(
  spacing: 8.0, // 子元素水平间距
  runSpacing: 8.0, // 行与行的垂直间距
  children: List.generate(15, (index) {
    // 模拟不同长度的文本
    String content = index % 4 == 0 
        ? '这是一段较长的文本，用来测试容器自适应宽度' 
        : index % 2 == 0 ? '中等长度文本' : '短文本';
    
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      margin: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        borderRadius: BorderRadius.circular(6),
      ),
      child: Text(
        content,
        style: const TextStyle(fontSize: 14),
        // 文本过长时自动换行，容器高度会自适应
        softWrap: true,
      ),
    );
  }),
)

这个方案中，每个容器的宽度会根据文本长度自动调整，超出一行宽度时自动换行，容器高度也会随文本行数变化，完全满足你的需求。

方案二：自定义GridView的布局规则（适合必须用GridView的场景） #

如果一定要用GridView系列组件，默认的SliverGridDelegate（比如固定列数、最大宽度规则）无法实现内容自适应，推荐借助第三方库flutter_layout_grid来简化开发：

1. 先在pubspec.yaml添加依赖：

dependencies:
  flutter_layout_grid: ^2.0.0

2. 使用代码：

LayoutGrid(
  columnSizes: [auto, auto, auto], // 列宽自适应子元素内容
  rowSizes: const [auto], // 行高自适应子元素内容
  rowGap: 8.0,
  columnGap: 8.0,
  children: List.generate(15, (index) {
    String content = index % 4 == 0 
        ? '这是一段较长的文本，用来测试容器自适应宽度' 
        : index % 2 == 0 ? '中等长度文本' : '短文本';
    
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        borderRadius: BorderRadius.circular(6),
      ),
      child: Text(content, style: const TextStyle(fontSize: 14)),
    );
  }),
)

该库的LayoutGrid支持将列/行尺寸设为auto，让子元素的宽高完全跟随文本内容变化，同时保留网格布局的特性。

文本自适应补充 #

如果需要文本长度超出容器时自动换行，只需保持Text的softWrap: true（默认开启）即可，容器会自动适配文本的行数高度；如果需要文本随容器尺寸缩放，可在Text外层包裹FittedBox，但这不符合你“容器随文本调整”的需求，无需额外设置。

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