Yii2框架：如何实现ListView组件的输出换行？

场景一：列表项内文本自动换行 #

如果ListView的子项文本过长无法自动换行，只需给Text组件配置对应属性，同时保证父容器未锁死宽度：

示例代码：

ListView(
  children: [
    Padding(
      padding: const EdgeInsets.all(12),
      child: Text(
        "这是一段超长的测试文本，需要在ListView的列表项里自动换行展示，不会因为内容太长被挤出屏幕或者直接截断。",
        softWrap: true, // 开启自动换行（默认值为true，显式声明可确保生效）
        overflow: TextOverflow.visible, // 避免文本被截断
      ),
    ),
    // 其他列表项...
  ],
)

要是文本仍无法换行，检查父组件是否设置了固定宽度，让Text组件能获取自适应的横向空间即可。

场景二：ListView子项横向排列并换行 #

如果想让ListView里的子项像网格一样横向排列、自动换行，用Wrap嵌套或者GridView更合适：

用Wrap实现： #

ListView(
  children: [
    Wrap(
      spacing: 10, // 子项水平间距
      runSpacing: 10, // 行与行的垂直间距
      children: List.generate(15, (idx) {
        return Container(
          width: 110,
          height: 60,
          color: Colors.lightBlue[100],
          alignment: Alignment.center,
          child: Text("列表项 $idx"),
        );
      }),
    ),
  ],
)

用GridView替代（更适配网格场景）： #

GridView.count(
  crossAxisCount: 3, // 每行显示3个项
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  padding: const EdgeInsets.all(12),
  children: List.generate(15, (idx) {
    return Container(
      color: Colors.lightGreen[100],
      alignment: Alignment.center,
      child: Text("网格项 $idx"),
    );
  }),
)

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