Flutter中如何让ListTile的leading垂直居中？

问题出在ListTile的默认布局逻辑上——它的leading区域默认是和title的第一行文本对齐的，当title内容换行导致整个tile高度增加时，leading并不会自动适配整个tile的高度来居中。你之前尝试的Column居中之所以没生效，是因为ListTile给leading分配的垂直空间并不是整个tile的高度，而是被限制在title第一行的范围内。

给你两个可行的解决方案：

方案一：自定义Row布局替代ListTile（最可靠） #

直接用Row和Column构建整个tile，完全控制各部分的对齐方式：

class EventTile extends StatelessWidget {
  final EventEntity event;
  final UserEntity user;
  const EventTile({super.key, required this.event, required this.user});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 2),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center, // 整个Row垂直居中对齐
        children: [
          // 原Leading部分
          ClipRRect(
            borderRadius: BorderRadius.circular(8),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8),
              child: Column(
                mainAxisSize: MainAxisSize.min, // 让Column仅占内容高度
                children: [
                  AutoSizeText(
                    DateFormat('d').format(event.date!.toDate()).toString(),
                  ),
                  AutoSizeText(
                    DateFormat('MMM').format(event.date!.toDate()).toString(),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(width: 16), // 模拟ListTile的leading与title间距
          // 中间的标题和副标题区域
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                AutoSizeText(
                  'Event very long name',
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                ),
                const SizedBox(height: 4), // 标题与副标题间距
                Row(
                  children: [
                    Container(
                      margin: const EdgeInsets.only(right: 5),
                      child: const FaIcon(
                        FontAwesomeIcons.locationDot,
                        size: 20,
                      ),
                    ),
                    Expanded(
                      child: AutoSizeText('event location'),
                    ),
                  ],
                ),
              ],
            ),
          ),
          // 原Trailing部分
          const FaIcon(FontAwesomeIcons.crown),
        ],
      ),
    );
  }
}

方案二：给ListTile的Leading套Align组件（轻量修改） #

如果不想完全替换ListTile，可以给leading的内容外层包裹Align，并设置alignment为Alignment.center，同时确保容器尽可能占满垂直空间：

leading: ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 8),
    height: double.infinity, // 让Container占满ListTile的垂直高度
    child: Align(
      alignment: Alignment.center,
      child: Column(
        mainAxisSize: MainAxisSize.min, // 避免Column拉伸
        children: [
          AutoSizeText(
            DateFormat('d').format(event.date!.toDate()).toString(),
          ),
          AutoSizeText(
            DateFormat('MMM').format(event.date!.toDate()).toString(),
          ),
        ],
      ),
    ),
  ),
),

方案二的关键是给Container设置height: double.infinity，让它占满ListTile分配的垂直空间，再通过Align让内部的Column居中。

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