Flutter：Horizontal ListView无固定宽子项不显示及屏幕适配求助

问题分析 #

你遇到的RenderFlex children have non-zero flex but incoming width constraints are unbounded错误，本质是横向ListView的子项没有明确的宽度约束——ListView横向布局时默认是无界宽度（即使禁止滚动），导致内部的LinearPercentIndicator（依赖Flex布局）无法确定自身宽度。

之前用MediaQuery计算宽度错乱，大概率是没正确扣除所有间距的总宽度，而且这种方式不够灵活，不如用Flutter的布局组件自动分配空间。

正确实现方式：用Row + Expanded替代ListView #

Row在有父容器宽度约束时，能自动将可用空间分配给子项，结合Expanded可以让每个进度条平分剩余宽度，同时精准控制间距：

// 假设n是进度条的动态数量
int n = 3;

Container(
  height: 10,
  // 对应原设计的整体左内边距
  padding: EdgeInsets.only(left: 2.0),
  child: Row(
    children: List.generate(n, (index) {
      final isLast = index == n - 1;
      return Expanded(
        child: Padding(
          // 控制子项之间的间距：最后一个子项不需要右边距
          padding: EdgeInsets.only(right: isLast ? 0 : 4.0),
          child: LinearPercentIndicator(
            alignment: MainAxisAlignment.start,
            lineHeight: 5.0,
            percent: 1.0,
            progressColor: isLast ? theme.inboxListItemShadowColor : theme.userProfileTierBadgeColor,
            backgroundColor: theme.inboxListItemShadowColor,
            barRadius: Radius.circular(50),
            // 移除内部padding，避免影响宽度计算，间距统一由外层Padding控制
            padding: EdgeInsets.zero,
          ),
        ),
      );
    }),
  ),
)

关键优化点 #

1. 用Row替代ListView：Row会继承父容器的宽度约束，给子项提供明确的宽度范围，避免无界约束问题。
2. Expanded平分空间：每个进度条通过Expanded自动平分Row的可用宽度（已扣除所有间距），完美适配不同屏幕。
3. 外移间距控制：把LinearPercentIndicator的padding移到外层Padding组件，确保进度条能填满分配到的宽度，不会因为内部padding导致布局错乱。
4. 动态适配数量：通过List.generate根据数量n生成子项，完全支持动态数量需求。

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