Flutter 将onTap添加到CheckboxListTile以调用AlertDialog

我正在构建一个用于考勤的Flutter移动应用程序

我正在使用CheckboxListTile显示注册列表。我想在单击或轻触列表项时调用警报对话框。但是，我发现CheckboxListTile没有onTap属性

那么有没有办法将onTap添加到CheckboxListTile？谢谢

创建CheckboxListTile的部分代码：

  Widget staffList(AsyncSnapshot<EnrollmentListModel> snapshot) {
    if (snapshot.data.staffList.length > 0) {
      return ListView.builder(
        shrinkWrap: true,
        itemCount: snapshot.data.staffList.length,
        itemBuilder: (context, index) {
          return Card(
            child: CheckboxListTile(
              title: Text(
                '${snapshot.data.staffList[index].listName}',
                style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              ),
              value: snapshot.data.staffList[index].attendanceStatus == 'Y',
              onChanged: (bool value) {},
              activeColor: Colors.green,
            ),
          );
        },
      );
    }
    else {
      return Center(child: Text("No enrollment for this course."));
    }
  }

您可以将CheckboxListTile包装在GestureDetector中，该GestureDetector具有onTap属性以及许多其他可能有用的属性

可以找到更多关于GestureDetector类的文档

范例-

  Widget staffList(AsyncSnapshot<EnrollmentListModel> snapshot) {
    if (snapshot.data.staffList.length > 0) {
      return ListView.builder(
        shrinkWrap: true,
        itemCount: snapshot.data.staffList.length,
        itemBuilder: (context, index) {
          return Card(
            child: GestureDetector(
              onTap: () {
                //Add code for showing AlertDialog here
              },
              child: CheckboxListTile(
                title: Text(
                  '${snapshot.data.staffList[index].listName}',
                  style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
                ),
                value: snapshot.data.staffList[index].attendanceStatus == 'Y',
                onChanged: (bool value) {},
                activeColor: Colors.green,
              ),
            ),
          );
        },
      );
    }
    else {
      return Center(child: Text("No enrollment for this course."));
    }
  }

另类- 如果只需要onTap回调，也可以使用InkWell小部件。只需将上述代码中的手势检测器替换为InkWell即可

可以找到有关InkWell的文档。

onTap无法工作的原因是checkboxListTile本身是可单击的，如果我们再次尝试在其上应用onTap，它将与原始的单击事件冲突。因此，不必在GestureDetector中包装checkboxListTile，您可以在单击设置值后，在onChanged方法中直接传递打开alertDialog的调用。工作代码示例如下：

return Scaffold(
      appBar: new AppBar(title: new Text('CheckboxListTile demo')),
      body: ListView(
        children: values.keys.map((String key) {
          return CheckboxListTile(
              title: Text(key),
              value: values[key],
              onChanged: (bool value) {
                setState(() {
                  values[key] = value;
                });
                _showDialog();
              },
            );
        }).toList(),
      ),
    );
  }

  void _showDialog() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
      // return object of type Dialog
      return AlertDialog(
        title: new Text("Alert Dialog title"),
        content: new Text("Alert Dialog body"),
        actions: <Widget>[
          // usually buttons at the bottom of the dialog
          new FlatButton(
            child: new Text("Close"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    });

输出是，如果点击foo复选框，它将选中该框并打开alertDialog。希望这能回答你的问题

---

嗨，欢迎来到苏。如本教程所述，本网站是一个有用问题及其答案的存储库。你的答案与另一个答案没有本质上的区别，也不是很有用，因为它不会增加任何新的价值或信息。请避免写重复的答案，或者编辑您的答案以增加价值，或者将其全部删除，这将确保网站上的所有问题和答案保持有用，而不是分散/重复。干杯谢谢我已经试用了这两个小部件，它们很容易使用。但是，onTap不适用于CheckboxListTile，当我点击列表项时，警报对话框没有弹出。我尝试了onDoubleTap来测试显示警报对话框，它正常工作…onTap不工作可能是因为CheckboxListTile还有一个用于taps的处理程序，它覆盖了GestureDetector tap。能否尝试检查手势检测器的行为属性？我想您可能需要将其设置为HitTestBehavior.Transparent设置为，以便GestureDetector和CheckBoxListTile都能够识别点击。是的，我有与您相同的发现，CheckBoxListTile的onTap将调用复选框的onChanged。我尝试了Behavior:HitTestBehavior.Transparent和其他值，但结果为负值。如果问题无法解决，我可能会改为使用带有尾随：复选框的ListTile，而不是CheckboxListTile。无论如何，谢谢你D

return Scaffold(
      appBar: new AppBar(title: new Text('CheckboxListTile demo')),
      body: ListView(
        children: values.keys.map((String key) {
          return CheckboxListTile(
              title: Text(key),
              value: values[key],
              onChanged: (bool value) {
                setState(() {
                  values[key] = value;
                });
                _showDialog();
              },
            );
        }).toList(),
      ),
    );
  }

  void _showDialog() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
      // return object of type Dialog
      return AlertDialog(
        title: new Text("Alert Dialog title"),
        content: new Text("Alert Dialog body"),
        actions: <Widget>[
          // usually buttons at the bottom of the dialog
          new FlatButton(
            child: new Text("Close"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    });