Flutter中是否可以在ListTile的title或subtitle属性中使用图标？

方案可行性确认 #

你使用Wrap组件混合Text和Icon的方案是完全可行的。ListTile的title、subtitle属性的接收类型是通用Widget，并没有限制只能使用文本组件，任意可以实现图文混排的组件都可以传入。

适配后的代码示例 #

你可以直接把原来的Text组件替换为Wrap，按需求插入Icon即可，参考修改代码：

child: ListTile(
  title: Wrap(
    spacing: 4, // 图标和文字的水平间距
    crossAxisAlignment: WrapCrossAlignment.center, // 垂直方向居中对齐
    children: [
      Text(widget.challenge.name, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17)),
      // 示例：在标题后加一个官方认证图标
      Icon(Icons.verified, color: Colors.blue, size: 16,)
    ],
  ),
  subtitle: Wrap(
    spacing: 3,
    crossAxisAlignment: WrapCrossAlignment.center,
    children: [
      Icon(Icons.info_outline, size: 12, color: Colors.grey),
      Text(
        'A sufficiently long subtitle warrants three lines',
        style: TextStyle(fontSize: 12),
      ),
    ],
  ),
  trailing:Icon(FontAwesomeIcons.chevronRight),
  isThreeLine: true,
),

补充说明 #

• 如果你的图文内容确定不会超过一行，也可以用Row组件搭配mainAxisSize: MainAxisSize.min实现，性能和Wrap基本一致
• 可以通过调整Wrap的spacing、runSpacing参数控制元素之间的水平、垂直间距，crossAxisAlignment参数控制图文的垂直对齐方式，避免出现图标和文字不对齐的问题

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