使用 AlertDialog 在 flutter 中更改 ListTile 的标题和副标题

Question

我正在构建一个应用程序，并且是 Flutter 的新手。该应用程序应该通过 TextFormField 进行输入，并使用该数据在 ListTile 小部件列表中构建图块。 这样可行。 现在我想使用 ListTiles 的尾随图标和 onPressed() function 来显示一个 AlertDialog 来编辑每个 ListTile 的标题和副标题。 这就是问题所在。 我可能已经将自己编码到那里的一个角落。 有人可以告诉我如何引用正确的小部件并更改其属性。 我非常费力地处理函数中给出的所有 arguments，并通过删除一个图块并在列表的相同索引处插入一个新的 - 我不能 setState() 所以它只更新下一个更新 state 的操作。当我从列表中删除一个图块并想引用新插入的 Listtile 时，异步 function 会抛出错误“此 BuildContext 不再有效”。

我需要紧急帮助

这是 ListTile 扩展

ListTile _tile(number, String title, String subtitle, IconData icon, context,
    cont1, cont2, height, width, indexcolor) {
  return ListTile(
    key: ValueKey("$number-$title-$subtitle"),
    tileColor: indexcolor.isOdd
        ? const Color.fromARGB(255, 217, 218, 247)
        : Colors.white,
    title: Text(title,
        style: const TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 20,
        )),
    subtitle: Text(subtitle),
    leading: Icon(
      icon,
      color: Colors.blue[500],
    ),
    trailing: IconButton(
      icon: const Icon(Icons.edit),
      onPressed: () async {
        await showEditDialog(context, cont1, cont2, height, width, title,
            subtitle, number, listTiles, height, width);
      },
    ),
  );
}

这是返回 AlertDialog 的 function

Future<void> showEditDialog(BuildContext context, cont1, cont2, height, width,
    String titel, String subs, number, listofTiles, heightSrc, widthScr) async {
  return await showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        content: SizedBox(
          height: height * .25,
          width: width * .9,
          child: Column(children: [
            const Text("Edit Task",
                style: TextStyle(color: Color.fromARGB(255, 87, 140, 184))),
            Padding(
              padding: const EdgeInsets.only(top: 8, bottom: 8),
              child: TextFormField(
                controller: cont1,
                decoration: InputDecoration(
                    labelText: titel,
                    filled: true,
                    fillColor: const Color.fromARGB(255, 236, 231, 231)),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8, bottom: 8),
              child: TextFormField(
                controller: cont2,
                decoration: InputDecoration(
                    labelText: subs,
                    filled: true,
                    fillColor: const Color.fromARGB(255, 236, 231, 231)),
              ),
            ),
          ]),
        ),
        actions: [
          Row(
            children: [
              Expanded(
                child: TextButton(
                  onPressed: () {
                    cont1.clear();
                    cont2.clear();
                    Navigator.pop(context);
                  },
                  child: const Text("Cancel"),
                ),
              ),
              TextButton(
                onPressed: () {
                  listofTiles.removeAt(number);
                  listofTiles.insert(
                      number,
                      _tile(
                          listTiles.length,
                          cont1.text,
                          cont2.text,
                          Icons.work,
                          context,
                          cont1,
                          cont2,
                          heightSrc,
                          widthScr,
                          (listTiles.length + 1)));
                  cont1.clear();
                  cont2.clear();
                  Navigator.pop(context);
                  print(listofTiles);
                  setState() {}
                  ;
                },
                child: const Text("Save Changes"),
              ),
            ],
          )
        ],
      );
    },
  );
}

我正在使用 statefulwidget 并且在脚手架内部，Column 是 Reordablelist 的代码

Expanded(
          child: ReorderableListView(
              onReorder: (oldIndex, newIndex) {
                setState(
                  () {
                    // titelWid = listChildren[oldIndex].titel.data;
                    if (oldIndex < newIndex) {
                      newIndex -= 1;
                    }
                    final item = listTiles.removeAt(oldIndex);
                    listTiles.insert(newIndex, item);
                  },
                );
              },
              children: listTiles),

所以我尝试使用键直接引用 ListTile，但我确实知道如何调用它并从 ListTile 获取信息，所以我不必通过所有函数拖动所有内容。

有人可以帮忙提前谢谢你

Answer 1

要更新对话框 Ui，您可以使用StatefulBuilder 。

  return await showDialog(
    context: context,
    builder: (context) {
      return StatefulBuilder(
        builder: (context, setState) =>  //this `setState` will update the dialog ui,
          AlertDialog(

样本片段

showDialog(
  context: context,
  builder: (context) {
    int c = 0;
    return StatefulBuilder(
      builder: (context, setState) {
        return AlertDialog(
          content: ElevatedButton(
              onPressed: () {
                setState(() {
                  c++;
                });
              },
              child: Text("value $c")),
        );
      },
    );
  },
);