Flutter ListTile内所有元素垂直居中对齐的最优实现方法

你原有代码的居中失效核心原因是开启了isThreeLine: true，该属性是为三行文本场景设计的，会强制内容靠上排列、提高组件最小高度，首先需要移除这个配置。

方案1：原生属性实现（推荐，Flutter 3.10+ 支持） #

这是目前性能最好、改造成本最低的方案，Flutter 3.10 后ListTile新增了alignment参数，直接配置即可实现所有子元素垂直居中，完全保留ListTile原有点击水波纹、语义化等原生能力：

Padding(
  padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
  child: Card(
    child: ListTile(
      // 核心配置：所有子元素垂直居中
      alignment: ListTileAlignment.center,
      leading: const FlutterLogo(size: 55),
      title: const Text('Overview'),
      subtitle: const Text('250.956.261'),
      trailing: const Icon(
        Icons.arrow_right_outlined,
        size: 30,
      ),
      // 可自定义调整组件上下内边距，控制整体高度
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    ),
  ),
)

注意：如果需要适配低于3.10的Flutter版本，可以用下面的自定义布局方案。

方案2：自定义Row布局（兼容全版本、灵活度更高） #

如果需要更多自定义布局能力，或者兼容低版本Flutter，可以直接用Row自定义实现，对齐方式完全可控：

Padding(
  padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
  child: Card(
    // 保留ListTile的点击水波纹效果，不需要点击可以去掉InkWell
    child: InkWell(
      onTap: () { /* 你的点击逻辑 */ },
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Row(
          // 全局控制所有子元素垂直居中
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const FlutterLogo(size: 55),
            const SizedBox(width: 16), // 与ListTile默认的leading和title间距保持一致
            Expanded(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Text('Overview'),
                  Text('250.956.261'),
                ],
              ),
            ),
            const SizedBox(width: 16),
            Icon(
              Icons.arrow_right_outlined,
              size: 30,
              color: Colors.grey[600],
            ),
          ],
        ),
      ),
    ),
  ),
)

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