Flutter中如何让ListTile内的Checkbox始终垂直居中对齐

问题原因 #

ListTile组件默认布局规则中，leading和trailing位置的组件默认与title组件的顶部对齐。当title文本过长换行、整体组件高度被撑开时，leading位置的Checkbox就会固定在顶部位置，无法自动垂直居中，该表现和外层是否包裹Card组件无关。

解决方案 #

方案1：使用组件原生属性配置（适配Flutter 3.0+版本，推荐） #

Flutter 3.0版本已经提供了专门的配置属性控制leading/trailing的对齐方式，只需要在ListTile中新增一行配置即可，无额外布局嵌套：

Card(
  child: ListTile(
    visualDensity: const VisualDensity(vertical: 3),
    // 新增以下配置，设置leading与trailing组件垂直居中
    leadingAndTrailingAlignment: ListTileLeadingAndTrailingAlignment.center,
    title: const Text("你的超长文本内容，无论多长都会让Checkbox保持居中"),
    leading: Checkbox(
      value: true,
      onChanged: (bool? value) {
        if (value != null) {
          // 编写勾选状态变更逻辑
        }
      },
    ),
  ),
)

方案2：手动包裹Align组件（兼容更低Flutter版本） #

如果使用的Flutter版本不支持上述属性，可以直接给Checkbox外层包裹Align组件，手动指定对齐规则，同时保持和默认leading布局一致的宽度表现：

Card(
  child: ListTile(
    visualDensity: const VisualDensity(vertical: 3),
    title: const Text("你的超长文本内容，无论多长都会让Checkbox保持居中"),
    leading: Align(
      alignment: Alignment.centerLeft,
      widthFactor: 1, // 保持和默认leading宽度匹配，避免布局偏移
      child: Checkbox(
        value: true,
        onChanged: (bool? value) {
          if (value != null) {
            // 编写勾选状态变更逻辑
          }
        },
      ),
    ),
  ),
)

两种方案实现后，无论ListTile的title文本有多长、组件纵向被撑开多少，Checkbox都会始终保持垂直居中的显示效果。

附问题复现的原始不对齐效果：

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