You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将ListView.builder输出包裹为可自动换行的小气泡文本按钮列表

实现自动换行气泡列表的代码调整方案

你现有代码的核心问题是将单列的ListView作为Wrap的唯一子组件,Wrap的自动换行流式布局能力需要直接作用于每个气泡子元素才能生效,不能嵌套ListView。

调整后的代码如下:

return Wrap(
  // 布局间距可根据UI需求自行调整数值
  spacing: 8,
  runSpacing: 4,
  children: (_filteredHashTags.isEmpty ? hashTagWigetsList : _filteredHashTags)
      .map((tagItem) => _buildHashTagList(tagItem))
      .toList(),
);

你可以自行调整Wrap的两个核心配置参数适配UI:

  • spacing:同一行内相邻气泡的水平间距
  • runSpacing:上下两行气泡的垂直间距

如果你的_buildHashTagList方法返回的气泡组件本身已配置内外边距,可对应调整上述两个参数的数值,避免出现间距叠加的问题。

内容的提问来源于stack exchange,提问作者Petro。

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.02 10:36:04