使用 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")),
        );
      },
    );
  },
);