Flutter中ListView列表项根据内容灵活实现多行布局的方法

核心思路 #

外层用ListView作为滚动列表（对应Swift的UITableView），每个列表项内部使用Wrap组件替代GridView来实现容器的自动换行（对应Swift的UICollectionView）。Wrap会根据自身可用宽度自动排列子组件，无需指定列数，完美解决动态数量容器的换行需求。

完整示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('嵌套自动换行布局')),
        body: const _NestedWrapList(),
      ),
    );
  }
}

class _NestedWrapList extends StatelessWidget {
  const _NestedWrapList();

  // 模拟每组的容器数据
  final List<List<String>> groupData = [
    ['标签1', '标签2', '标签3', '标签4'],
    ['较长内容标签', '标签B', '标签C'],
    ['短标签1', '短标签2', '短标签3', '短标签4', '短标签5', '短标签6'],
    ['单个容器'],
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(16),
      itemCount: groupData.length,
      itemBuilder: (context, index) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 列表项标题（可根据需求删除）
            Text(
              '第${index + 1}组',
              style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            // 自动换行的容器列表
            Wrap(
              spacing: 8, // 容器水平间距
              runSpacing: 8, // 容器垂直行间距
              children: groupData[index].map((itemText) {
                return Container(
                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                  decoration: BoxDecoration(
                    color: Colors.blue.shade100,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Text(itemText),
                );
              }).toList(),
            ),
            const SizedBox(height: 16),
          ],
        );
      },
    );
  }
}

关键细节说明 #

• Wrap组件：相比GridView，它不需要固定列数，会自动根据子组件尺寸和可用宽度换行，完全适配动态数量的容器场景。
• ListView.builder：高效构建滚动列表，适合大量数据的场景，性能优于直接用ListView.children。
• 自定义容器样式：可以修改Container的decoration、padding等属性，实现你需要的UI样式，比如圆角、背景色、阴影等。
• 交互扩展：如果需要给容器添加点击事件，只需给Container包裹InkWell或GestureDetector即可。

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