Question

我正在构建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."));
    }
  }

Answer 1

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

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。希望这能回答您的问题。

Answer 2

您可以将CheckboxListTile包裹在GestureDetector属性内的onTap内，以及其他许多可能有用的属性。

有关GestureDetector类的更多文档，请参见here。

示例-

  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."));
    }
  }

替代- 如果只需要InkWell回调，也可以使用onTap小部件。只需将上面代码中的GestureDetector替换为InkWell。

有关InkWell的文档可以在here中找到。

Answer 3

body: ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                child: Text(index.toString()),
                onTap: () {//Write your AlertDialog code here},
              );
            },
            itemCount: 10));

将onTap添加到CheckboxListTile以调用AlertDialog

3 个答案: