如何制作图标与标题对齐的自定义Flutter ListTile组件

默认的ListTile会将leading图标垂直居中，无法满足图标与标题顶部对齐的需求，我们可以通过自定义布局或调整ListTile的leading对齐方式来实现，以下是两种可行方案：

方案一：自定义布局（推荐，样式更可控） #

通过Row设置整体顶部对齐，搭配Column承载标题和多行副标题，可完全自定义间距和样式：

import 'package:flutter/material.dart';

class LocationListItem extends StatelessWidget {
  final String title;
  final String subtitle;

  const LocationListItem({
    super.key,
    required this.title,
    required this.subtitle,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start, // 核心：让所有子组件顶部对齐
        children: [
          // 图标与标题顶部对齐，微调padding匹配文本基线
          Padding(
            padding: const EdgeInsets.only(top: 4.0),
            child: const Icon(Icons.location_on, color: Colors.grey),
          ),
          const SizedBox(width: 16.0), // 图标与文本的间距
          // 文本区域，自动适配多行副标题
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                const SizedBox(height: 4.0),
                Text(
                  subtitle,
                  style: const TextStyle(
                    fontSize: 14,
                    color: Colors.grey,
                  ),
                  softWrap: true, // 允许副标题自动换行
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// 使用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: LocationListItem(
          title: "示例标题",
          subtitle: "这是一段用于测试的长副标题，当内容超过一行时会自动换行，此时图标依然会保持和标题顶部的对齐状态，不会随着副标题的行数向下偏移。",
        ),
      ),
    ),
  ));
}

方案二：修改ListTile的leading对齐 #

如果偏好使用ListTile组件，可以通过Align调整leading的对齐方式：

ListTile(
  leading: Align(
    alignment: Alignment.topCenter,
    child: Padding(
      padding: const EdgeInsets.only(top: 4.0), // 微调对齐位置
      child: const Icon(Icons.location_on),
    ),
  ),
  title: const Text("示例标题"),
  subtitle: const Text(
    "这是一段用于测试的长副标题，当内容超过一行时会自动换行，此时图标依然会保持和标题顶部的对齐状态，不会随着副标题的行数向下偏移。",
    softWrap: true,
  ),
  contentPadding: const EdgeInsets.symmetric(horizontal: 16.0),
)

关键要点 #

• 两种方案都通过CrossAxisAlignment.start（方案一）或Alignment.topCenter（方案二）实现图标与标题顶部对齐
• 给图标添加少量padding是为了匹配默认Text组件的基线，让视觉对齐更自然
• 副标题开启softWrap: true确保内容自动换行，不会溢出屏幕

内容的提问来源于stack exchange，提问作者황희윤