ios - 有没有一种方法可以使用户创建一个复选框列表，以便用户可以编辑该复选框的标签？例如，需要完成的任务

Question

我正在尝试为应用创建UI，以使用户列出任务并在完成任务时将其选中。但我希望用户能够无缝编辑这些任务的名称，然后单击复选框以完成任务。

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

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

这只是我希望能够显示 list

引用:https://medium.com/@DakshHub/flutter-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

您只需要返回ListTile而不是Text内的itemBuilder即可。 ListTile将CheckBox作为leading(带一个小部件，将显示在左侧)，Text作为title，最后将IconButton作为trailing(带一个小部件，将显示在右侧)。当被点按时，带有AlertDialog的TextField出现，以编辑文本以编辑文本(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功能。