使用checkboxlisttile在flutter中使用CheckboxListtile时是否可以知道触发复选框或项目文本

Question

我正在使用CheckBoxListtile在Flutter中显示一些待办事项（v3.0.4）。这是代码看起来像：

CheckboxListTile(
              controlAffinity: ListTileControlAffinity.leading,
              title: Text(element.name,style:element.isCompleted == 1? TextStyle(color: Colors.grey):TextStyle(color: Colors.black)),
              value: element.isCompleted == 1?true:false,
              checkColor: Colors.green,
              selected: element.isCompleted == 1?true:false,

              onChanged: (bool? value) {
                if(value!){
                  element.isCompleted = 1;
                }else{
                  element.isCompleted = 0;
                }
                TodoProvider.updateTodo(element).then((value) => {
                  TodoProvider.getTodos().then((todos) => {
                    buildTodoItems(todos)
                  })
                });
              },
            ))

用户点击checkboxlisttile项目文本时，我想显示待办事项详细信息，当用户点击复选框时，我想更改待办事项任务以完成。现在，我面临的问题是，我无法检测到用户点击的哪一部分，一路触发onchange事件。我已经阅读了CheckBoxListtile源代码，似乎没有API可以执行此操作。我想念什么吗？我应该怎么做才能检测用户选择哪一部分？

Answer 1

您可以将标题包装在getruestector（）中。现在，当标题被点击时， 将运行手势检测器，而不是on Changed（）。

在此示例中，如果您点击文本“复选框”，则可以看到实际的复选框值未更新，但eStureDetector is 被调用，如果您查看控制台“敲击”是被打印。

这是一个完整的示例。我希望你明白：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  var _value = false;
  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      title: GestureDetector(
        child: Text('Checkbox'),
        onTap: () {
          print('tapped');
          // you can change the value here too
          // setState(() {
          //   _value = !_value;
          // });
        },
      ),
      value: _value,
      onChanged: (bool? value) {
        setState(() {
          _value = value!;
        });
      },
    );
    ;
  }
}