如何在Flutter的复选框中添加标签(标题文本)？

Question

我正在玩Checkbox以查看它是如何工作的,但我没有看到它的标题选项.

Checkbox(
  title: Text("Checkbox label"),  // The named parameter 'title' isn't defined.
  value: true,
  onChanged: (newValue) { },
);

我是否必须创建自己的小部件才能为其添加标题？

这是一个Q&A自我回答.我的答案如下.

Answer 1

如果您需要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()回调.但是,您需要自己使用正确的检查值重建它.看到这个答案.
• 另一种解决方案是使用带有Checkbox和Text小部件的Row创建自己的小部件.但是,您可能希望将其包装在手势检测器中,这样对文本的点击也会触发onChanged()回调.您可以从CheckboxListTile源代码开始作为参考.

Answer 2

我使用负间距换行来在复选框正下方获得标签。

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

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

结果是这样的：

Answer 3

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),
        ],
      ),
    );
  }
}