Flutter：如何让Row组件内的Checkbox与文本垂直对齐？

你遇到的核心问题是Checkbox自带默认内边距和固定点击区域，单纯调整Row的CrossAxisAlignment无法让它和文本完美对齐。下面给你两种可行的解决思路：

方案一：使用CheckboxListTile（推荐） #

这是Flutter官方专门为「复选框+文本」场景设计的组件，自带对齐逻辑，不用手动调布局：

import 'package:flutter/material.dart';

class FilledForm extends StatefulWidget {
  final String action;
  final String details;

  const FilledForm({required this.action, required this.details, Key? key}) : super(key: key);

  @override
  State<FilledForm> createState() => _FilledFormState();
}

class _FilledFormState extends State<FilledForm> {
  var isDone = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
      child: Column(
        children: [
          CheckboxListTile(
            controlAffinity: ListTileControlAffinity.leading, // 复选框放在左侧
            contentPadding: EdgeInsets.zero, // 去掉默认内边距适配你的布局
            shape: CircleBorder(),
            value: isDone,
            onChanged: (bool? value) {
              setState(() {
                isDone = value!;
              });
            },
            title: Text(widget.action),
            subtitle: Text(widget.details), // 副标题对应原details文本
          ),
          Divider(thickness: 1),
        ],
      ),
    );
  }
}

方案二：手动调整Checkbox的显示参数 #

如果不想替换组件，可以通过以下参数压缩Checkbox的额外空间，配合Row对齐实现效果：

import 'package:flutter/material.dart';

class FilledForm extends StatefulWidget {
  final String action;
  final String details;

  const FilledForm({required this.action, required this.details, Key? key}) : super(key: key);

  @override
  State<FilledForm> createState() => _FilledFormState();
}

class _FilledFormState extends State<FilledForm> {
  var isDone = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Checkbox(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // 缩小默认点击区域
                visualDensity: VisualDensity.compact, // 紧凑显示复选框
                shape: CircleBorder(),
                value: isDone,
                onChanged: (bool? value) {
                  setState(() {
                    isDone = value!;
                  });
                },
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start, // 文本左对齐更美观
                children: [
                  Text(widget.action),
                  Text(widget.details),
                ],
              ),
            ],
          ),
          Divider(thickness: 1),
        ],
      ),
    );
  }
}

注：已帮你把类名filledForm改为FilledForm，符合Dart代码规范。

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