有没有一种方法可以在flutter中创建一个复选框列表，用户可以编辑该复选框的标签?例如，需要完成的任务

Question

我正试图为一个应用程序制作一个UI，让用户列出任务，并在完成任务时进行检查。但我希望用户能够无缝地编辑这些任务的名称，然后点击复选框完成。

我尝试过使用本教程中的ListView.Builder

https://miro.medium.com/max/186/1*gE4Qj0fFgLFGlSUiy-rn2w.gif(您可能需要复制并粘贴链接(

只是我想能够在上显示一份清单

参考：https://medium.com/@DakshHub/flath-displaying-dynamic-contents-using-listview-builder-f2cedb1a19fb

class DyanmicList extends State<ListDisplay> {
List<String> litems = [];
final TextEditingController eCtrl = new TextEditingController();
@override
Widget build (BuildContext ctxt) {
return new Scaffold(
appBar: new AppBar(title: new Text("Dynamic Demo"),),
body: new Column(
children: <Widget>[
new TextField(
controller: eCtrl,
onSubmitted: (text) {
litems.add(text);
eCtrl.clear();
setState(() {});
},
),
new Expanded(
child: new ListView.builder
(
itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int Index) {
return new Text(litems[Index]);
}
)
)
],
)
);
}
}

Answer 1

您只需要在itemBuilder中返回ListTile，而不是Text。ListTile将具有CheckBox作为leading(采用将出现在左侧的窗口小部件(，Text作为title，并且最后具有IconButton作为trailing(采用将显示在右侧的窗口小程序(。当点击时，会出现一个具有TextField的AlertDialog，用于编辑编辑文本的文本(title(。

List<String> listItems = [];
List<bool> listCheck = [];
final TextEditingController eCtrl = new TextEditingController();
final TextEditingController _textFieldController =
new TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Dynamic Demo"),
),
body: new Column(
children: <Widget>[
new TextField(
controller: eCtrl,
onSubmitted: (text) {
setState(() {
listItems.insert(0, text);
listCheck.add(false);
eCtrl.clear();
});
},
),
new Expanded(
child: new ListView.builder(
itemCount: listItems.length,
itemBuilder: (BuildContext context, int index) {
return new ListTile(
leading: Checkbox(
value: listCheck[index],
onChanged: (value) {
setState(() {
listCheck[index] = !listCheck[index];
});
},
),
title: Text(listItems[index]),
trailing: IconButton(
icon: Icon(Icons.edit),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('TextField in Dialog'),
content: TextField(
controller: _textFieldController,
decoration: InputDecoration(
hintText: "${listItems[index]}"),
),
actions: <Widget>[
new FlatButton(
child: new Text('Done'),
onPressed: () {
setState(() {
listItems[index] =
_textFieldController.text;
_textFieldController.clear();
});
Navigator.of(context).pop();
},
),
],
);
},
);
},
),
);
},
),
),
],
),
);

您只需要添加CheckBox功能即可。

Answer 2

您可以使用DataTable小部件来实现这一点。它易于使用，并且可以具有可编辑的行。向它们添加检查列表也很容易。你也可以对它们进行排序。请参阅本教程。按照教程所说的去做，你会有一个具有检查和删除功能的列表。但为了能够编辑行，您需要将这行代码添加到DataRow中的DataCells中：CCD_ 16。我觉得这个教程很好，有很好的解释。但如果你需要更多的帮助，我很乐意帮助你。

CoderzHeaven