将onTap添加到CheckboxListTile以调用AlertDialog

时间:2019-08-14 04:34:52

标签: flutter dart

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

3 个答案:

答案 0 :(得分: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。希望这能回答您的问题。

enter image description here

答案 1 :(得分:0)

您可以将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中找到。

答案 2 :(得分:-1)

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