Flutter：如何让ListTile中的Icon与文本实现水平对齐？

你可以通过以下两种方式解决图标和文本的水平对齐问题：

方法1：用Align组件包裹图标 #

在leading的Icon外层嵌套Align，通过设置对齐方式让图标和文本对齐：

ListTile(
  leading: Align(
    alignment: Alignment.centerLeft,
    child: Icon(
      Icons.brightness_1,
      color: Colors.black,
      size: 13,
    ),
  ),
  minLeadingWidth: 2,
  title: Text("Can you understand?"),
  trailing: Radio(
    value: "talk",
    groupValue: level,
    onChanged: (value) {
      setState(() {
        level = value.toString();
      });
    },
  ),
),

如果希望图标和文本的基线对齐（视觉上更统一），可以把alignment改成Alignment.bottomCenter，同时给Icon加一点顶部内边距微调：

leading: Align(
  alignment: Alignment.bottomCenter,
  child: Padding(
    padding: const EdgeInsets.only(top: 3),
    child: Icon(
      Icons.brightness_1,
      color: Colors.black,
      size: 13,
    ),
  ),
),

方法2：自定义Row替代ListTile（更灵活） #

如果ListTile的默认布局限制太多，可以直接用Row组件自定义布局，精准控制每个元素的对齐：

Row(
  crossAxisAlignment: CrossAxisAlignment.center, // 整体垂直居中对齐
  children: [
    Icon(
      Icons.brightness_1,
      color: Colors.black,
      size: 13,
    ),
    const SizedBox(width: 8), // 图标和文本的间距
    Expanded(
      child: Text("Can you understand?"),
    ),
    Radio(
      value: "talk",
      groupValue: level,
      onChanged: (value) {
        setState(() {
          level = value.toString();
        });
      },
    ),
  ],
),

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