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

Flutter:ListView.Builder的ListTile元素间距一致性优化需求

解决ListView.Builder中ListTile字段间距不一致的问题

直接用Spacer会因为文本长度不同导致剩余空间分配不均,视觉上间距乱飘,给你两个靠谱的方案:

方案一:用Expanded平分宽度(推荐)

给每个Text外面套Expanded,让它们平分Row的宽度,不管文本长短,每个字段的区域宽度一致,视觉上间距自然均匀,还能适配不同屏幕:

return ListTile(
  title: Row(children: [
    Expanded(child: Text(data[0], textAlign: TextAlign.start)),
    Expanded(child: Text(data[1], textAlign: TextAlign.center)),
    Expanded(child: Text(data[2], textAlign: TextAlign.end)),
  ]),
);

可以根据需求调整每个Text的textAlign,让内容对齐更规整。

方案二:固定间距+Expanded

要是你想要固定大小的间距,就用SizedBox代替Spacer,配合Expanded让文本占满剩余空间,这样间距不会随内容变化:

return ListTile(
  title: Row(children: [
    Expanded(child: Text(data[0])),
    const SizedBox(width: 16), // 自定义固定间距
    Expanded(child: Text(data[1])),
    const SizedBox(width: 16),
    Expanded(child: Text(data[2])),
  ]),
);

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.09 07:15:33