Flutter：如何在List Tile中实现每行包含3个元素的列表？

要实现你需要的每行3个元素的布局，不用局限于ListTile组件本身，用GridView或Wrap组件就能轻松达成效果，下面是两种常用方案：

方案一：使用GridView.count（推荐用于长列表） #

GridView.count可以直接指定每行的元素数量，适合需要滚动的长列表场景：

GridView.count(
  crossAxisCount: 3, // 核心参数：设置每行显示3个元素
  padding: const EdgeInsets.all(8),
  crossAxisSpacing: 8, // 元素之间的水平间距
  mainAxisSpacing: 8, // 元素之间的垂直间距
  childAspectRatio: 1.0, // 调整元素的宽高比，1:1就是正方形
  children: List.generate(9, (index) {
    // 自定义元素样式，模仿ListTile结构
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        borderRadius: BorderRadius.circular(4),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Icon(Icons.star, color: Colors.amber),
          const SizedBox(height: 4),
          Text('选项 $index'),
        ],
      ),
    );
  }),
)

如果想要完全用ListTile作为子元素，替换容器并调整适配比例即可：

GridView.count(
  crossAxisCount: 3,
  padding: const EdgeInsets.all(8),
  crossAxisSpacing: 8,
  mainAxisSpacing: 8,
  childAspectRatio: 1.2, // 调整宽高比让ListTile显示更合适
  children: List.generate(9, (index) {
    return ListTile(
      leading: const Icon(Icons.star, color: Colors.amber),
      title: Text('选项 $index'),
      dense: true, // 启用紧凑模式，适配小尺寸布局
      onTap: () {
        // 点击事件逻辑
      },
    );
  }),
)

方案二：使用Wrap组件（适合内容较少的场景） #

Wrap组件会自动根据容器宽度换行，适合元素数量不多、不需要滚动的场景：

Wrap(
  spacing: 8, // 元素水平间距
  runSpacing: 8, // 元素垂直间距
  children: List.generate(9, (index) {
    // 计算每个元素的宽度：屏幕宽度减去左右padding和间距后平分3份
    final itemWidth = (MediaQuery.of(context).size.width - 24) / 3;
    return SizedBox(
      width: itemWidth,
      child: ListTile(
        leading: const Icon(Icons.star, color: Colors.amber),
        title: Text('选项 $index'),
        dense: true,
        onTap: () {},
      ),
    );
  }),
)

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