Flutter中ListTile的leading组件仅居中，如何使其与昵称对齐？

问题描述 #

使用ListTile组件时，leading中的CircleAvatar始终垂直居中，无法和左侧昵称顶部对齐，尝试过Align、Container等方法均无效。

解决方案 #

方案1：自定义Row布局（推荐） #

ListTile的默认布局存在垂直居中约束，直接修改leading很难灵活调整，改用自定义Row可以完全控制对齐逻辑：

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // 头像图标
    CircleAvatar(
      child: FaIcon(FontAwesomeIcons.dog, size:28, color: Colors.white),
      backgroundColor: Color(0xffB8CCA3),
    ),
    SizedBox(width: 10), // 替代ListTile的horizontalTitleGap
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 昵称
          Text(" ${messages[index].nickname}", style: TextStyle(fontSize:14)),
          SizedBox(height: 5),
          // 消息内容
          Container(
            margin : const EdgeInsets.only(bottom:5),
            padding: const EdgeInsets.fromLTRB(15, 5, 15, 5),
            constraints: BoxConstraints(maxWidth:320),
            decoration: BoxDecoration(
              color: Color(0xffe9ecef),
              borderRadius: BorderRadius.circular(20),
            ),
            child: Text(messages[index].message, style: TextStyle(fontSize: 17))
          ),
        ],
      ),
    ),
  ],
)

方案2：修改ListTile的leading配置 #

如果坚持使用ListTile，可以通过给leading的Align设置heightFactor: 1，让Align高度适配子组件，从而实现顶部对齐：

ListTile(
  horizontalTitleGap: 10,
  leading: Align(
    alignment: Alignment.topCenter,
    heightFactor: 1, // 关键：让Align高度与子组件一致
    child: CircleAvatar(
      child: FaIcon(FontAwesomeIcons.dog, size:28, color: Colors.white),
      backgroundColor: Color(0xffB8CCA3),
    ),
  ),
  title: Text(" ${messages[index].nickname}", style: TextStyle(fontSize:14)),
  subtitle: Container(
    margin : const EdgeInsets.only(top:5, bottom:5),
    padding: const EdgeInsets.fromLTRB(15, 5, 15, 5),
    constraints: BoxConstraints(maxWidth:320),
    decoration: BoxDecoration(
      color: Color(0xffe9ecef),
      borderRadius: BorderRadius.circular(20),
    ),
    child: Text(messages[index].message, style: TextStyle(fontSize: 17))
  ),
)

注：方案2中移除了subtitle里的Align，因为默认subtitle已左对齐，多余的Align会导致布局冗余。

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