如果你需要带标签的Checkbox，那么你可以使用CheckboxListTile。

CheckboxListTile(
    title: Text("title text"), //    <-- label
    value: checkedValue,
    onChanged: (newValue) { ... },
  )

如果需要文本左侧的复选框，则可以设置controlAffinity参数。

CheckboxListTile(
    title: Text("title text"),
    value: checkedValue,
    onChanged: (newValue) { ... },
    controlAffinity: ListTileControlAffinity.leading,  //  <-- leading Checkbox
  )

注意事项

• 因为它是ListTile，所以单击该行上的任意位置都会激活onChanged()回调。但是，您需要自己使用正确的检查值重新构建它。参见this answer。
• 另一种解决方案是使用带有复选框和文本小部件的Row来制作您自己的小部件。不过，您可能希望将其 Package 在手势检测器中，这样点击文本也会触发onChanged()回调。您可以从CheckboxListTile source code开始作为参考。

我使用了一个Wrap和负间距来获得复选框下的标签。

child: Wrap(
    direction: Axis.vertical,
    crossAxisAlignment: WrapCrossAlignment.center,
    spacing: -15,
    children: [
       Checkbox(
           value: isPaid,
           onChanged: (bool? value) {
               setState(() {
                   isPaid = value ?? false;
               });
           },
       ),

       const Text("Paid"),
    ],
 ),

结果就是这样：

CheckboxListTile不太适合我的用例，所以我从文档中提取了LabeledCheckbox类并对其进行了一些修改：

import 'package:flutter/material.dart';

class LabeledCheckbox extends StatelessWidget {
  const LabeledCheckbox({
    Key? key,
    required this.label,
    required this.value,
    required this.onChanged,
  }) : super(key: key);

  final String label;
  final bool value;
  final Function onChanged;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        onChanged(!value);
      },
      child: Row(
        children: <Widget>[
          Checkbox(
            value: value,
            onChanged: (bool? newValue) {
              onChanged(newValue);
            },
          ),
          Text(label),
        ],
      ),
    );
  }
}

下面是一个简单的有状态版本。

import 'package:flutter/material.dart';

class LabeledCheckbox extends StatefulWidget {
  final bool? value;
  final String label;
  final bool leadingCheckbox;
  final ValueChanged<bool?>? onChanged;

  const LabeledCheckbox({
    Key? key,
    this.value,
    this.onChanged,
    this.label = '',
    this.leadingCheckbox = true,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _LabeledCheckboxState();
}

class _LabeledCheckboxState extends State<LabeledCheckbox> {
  var value = false;

  @override
  void initState() {
    super.initState();
    value = widget.value == true;
  }

  @override
  Widget build(BuildContext context) {
    var widgets = <Widget>[
      _buildCheckbox(context),
    ];
    if (widget.label.isNotEmpty) {
      if (widget.leadingCheckbox) {
        widgets.add(_buildLabel(context));
      } else {
        widgets.insert(0, _buildLabel(context));
      }
    }
    return InkWell(
      borderRadius: BorderRadius.circular(4),
      onTap: () => _onCheckedChanged(),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: widgets,
      ),
    );
  }

  Widget _buildCheckbox(BuildContext context) {
    return Checkbox(
      value: value,
      onChanged: (v) => _onCheckedChanged(),
    );
  }

  Widget _buildLabel(BuildContext context) {
    var padding =
        widget.leadingCheckbox ? const EdgeInsets.only(right: 8) : const EdgeInsets.only(left: 8);

    return Padding(
      padding: padding,
      child: Text(widget.label),
    );
  }

  void _onCheckedChanged() {
    setState(() {
      value = !value;
    });
    if (widget.onChanged != null) {
      widget.onChanged!.call(value);
    }
  }
}

您也可以简单地将复选框和文本放在列中，如下所示：

Column(
  children: [
    Checkbox(
        value: true,
        onChanged: (bool? selected) {
          ///Your logic here
        }),
    const Text("Label"),
  ],
),