Flutter ListView嵌套横向文本溢出如何实现自动换行而非滚动？

问题根源 #

• 你使用横向ListView展示服务文本本身不符合需求：ListView是滚动容器，天生不会自动折行，无论如何设置都只能滚动展示内容
• Row内部的右侧Column没有添加宽度约束，导致Column宽度会无限延展超出屏幕，触发溢出报错
• 固定20高度的容器也限制了文本折行后的展示空间，会导致折行后的文本被截断

修改步骤 #

1. 把横向ListView.builder替换成Wrap组件，Wrap会自动在内容超出父容器宽度时折行展示
2. 给Row内部最右侧的Column套上Expanded组件，限制其最大宽度为Row剩余可用宽度，避免无限制延展
3. 去掉原本包裹列表的固定高度20的Container，给Text设置softWrap: true保证自动折行生效

修改后的完整代码段 #

Expanded(
  child: ListView.builder(
    itemCount: respondedData3['data'].length,
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    physics: ScrollPhysics(),
    itemBuilder: (context, index) {
      String TimeFormat = DateFormat("yyyy-MM-dd").format(DateTime.parse(respondedData3['data'][index]['appointmentDate']));

      return Padding(
        padding: const EdgeInsets.only(left: 15, right: 15),
        child: Container(
          child: GestureDetector(
            onTap: () async {
              Navigator.pop(context);
            },
            child: Stack(children: [
              Container(
                // 折行后总高度超过80可以去掉这个高度限制或者调大，避免内容被截断
                // height: 80,
                width: double.infinity,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Column(
                          children: [
                            Text(TimeFormat, style: TextStyle(fontSize: 14, fontFamily: 'SegoeUI-Bold', color: kPrimaryColor)),
                            Text(respondedData3['data'][index]['appointmentTime'].toString(), style: TextStyle(fontSize: 13, fontFamily: 'SegoeUI', color: textGreyColor))
                          ],
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Container(
                          color: Colors.grey,
                          height: 40,
                          width: 1.5,
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        // 此处添加Expanded约束右侧内容宽度
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(respondedData3['data'][index]['serviceProviderName'].toString(), style: TextStyle(fontSize: 13, fontFamily: 'SegoeUI-Bold', color: textGreyColor)),
                              // 替换为Wrap实现自动折行
                              Wrap(
                                spacing: 4, // 多个服务项之间的横向间距
                                runSpacing: 2, // 折行后行与行之间的纵向间距
                                children: serviceShow.map((item) => Text(
                                  '${item["Name"]} ${item["Time"]} ${item["Price"]}',
                                  softWrap: true,
                                  style: TextStyle(fontSize: 13),
                                )).toList(),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ]),
          ),
        ),
      );
    },
  ),
)

额外说明 #

如果服务项需要自定义间距、对齐方式，可以调整Wrap的alignment、spacing、runSpacing参数适配需求。

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