Flutter中如何让ListView子项均分总宽度实现等宽布局

要让横向ListView里的每个Container宽度均分父容器宽度，可以用两种方法实现：

方法一：使用LayoutBuilder + ListView手动计算宽度 #

通过LayoutBuilder获取父容器的可用宽度，手动计算每个Container的宽度，确保均分：

Scaffold(
  body: Center(
    child: Container(
      height: 80,
      color: Colors.grey,
      child: LayoutBuilder(
        builder: (context, constraints) {
          final parentWidth = constraints.maxWidth;
          final itemCount = names.length;
          if (itemCount == 0) return const SizedBox.shrink();
          // 扣除所有子项的padding总宽度后均分
          final containerWidth = (parentWidth - (8.0 * 2 * itemCount)) / itemCount;
          return ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: itemCount,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: containerWidth,
                  decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Center(
                    child: Text(
                      names[index],
                      overflow: TextOverflow.ellipsis, // 处理文本过长的情况
                    ),
                  ),
                ),
              );
            },
          );
        },
      ),
    ),
  ),
);

方法二：使用GridView自动均分宽度 #

利用GridView.count的特性，直接指定横向排列和子项数量，自动均分宽度，代码更简洁：

Scaffold(
  body: Center(
    child: Container(
      height: 80,
      color: Colors.grey,
      child: names.isEmpty 
          ? const SizedBox.shrink()
          : GridView.count(
              scrollDirection: Axis.horizontal,
              crossAxisCount: names.length,
              padding: EdgeInsets.zero, // 移除默认padding避免错位
              children: names.map((name) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: Center(
                      child: Text(
                        name,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
    ),
  ),
);

注意事项 #

• 增加了空列表判断，避免除以0或空渲染的错误。
• 给Text添加了TextOverflow.ellipsis，防止名称过长超出容器。
• 方法二中移除了GridView的默认padding，避免子项布局错位。

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