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

ListTile是否可自定义以容纳Title、SubTitle及额外文本行?

ListTile 额外添加文本行的实现方案

以下是两种被开发者广泛使用的可行实现方式:

  • 方案1:直接自定义 subtitle 组件(改动最小)
    ListTile 的 subtitle 参数本身支持传入任意 Widget 类型,并非只能使用单个 Text 组件。你可以直接将多行内容封装到 Column 组件中传给 subtitle 即可,配合你已经开启的 isThreeLine: true 参数刚好适配三行内容的高度需求,修改后的参考代码如下:
Expanded(
 child: ListView.builder(
  itemCount: profile.length,
  shrinkWrap: true,
  itemBuilder: (context, index) => ListTile(
   leading: Image.asset('assets/images/profile.png'),
   title: Text(profile[index].firstName + ' ' + profile[index].lastName),
   // 把subtitle换成Column承载多行内容
   subtitle: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      Text('This is my speciality'),
      // 新增的额外文本行
      Text('你要添加的额外内容'),
    ],
   ),
   trailing: Text('$ 50'),
   visualDensity: VisualDensity.compact,
   dense: true,
   isThreeLine: true,
  ),
 ),
)

如果需要添加超过2行的副标题内容,可以手动调整 contentPadding 参数适配高度,或者使用方案2。

  • 方案2:自定义列表项(自由度最高)
    如果后续需要添加更多样式的内容、或者对排版间距有精细化要求,可以直接放弃ListTile的默认布局约束,用Row+Column组合自己实现自定义列表项,可灵活添加任意数量的文本行或其他组件。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.10.02 14:54:04