Flutter：未来构建器通过索引获取 Widget

Question

GridView.builder我的网格中已经有，ElevatedButton当我按下按钮时，按钮单击事件显示所有网格图块：

\n

如何仅在按下的按钮上显示此加载程序效果？

\n

\n

我的代码：

\n

 void _onSubmit() {\n    if (Constants.USER_TOKEN != null && Constants.USER_TOKEN != \'\') {\n      print(\'NO\');\n    } else {\n      showDialog<void>(\n        context: context,\n        builder: (BuildContext dialogContext) {\n          return SimpleDialog(\n            shape: RoundedRectangleBorder(\n                borderRadius: BorderRadius.circular(18.0)),\n            title: Text(\n              \'\xd0\x9f\xd1\x80\xd0\xbe\xd0\xb9\xd0\xb4\xd0\xb8\xd1\x82\xd0\xb5 \xd1\x80\xd0\xb5\xd0\xb3\xd0\xb8\xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd1\x86\xd0\xb8\xd1\x8e, \xd1\x87\xd1\x82\xd0\xbe\xd0\xb1\xd1\x8b \xd0\xb4\xd0\xbe\xd0\xb1\xd0\xb0\xd0\xb2\xd0\xbb\xd1\x8f\xd1\x82\xd1\x8c \xd0\xb2 \xd0\xba\xd0\xbe\xd1\x80\xd0\xb7\xd0\xb8\xd0\xbd\xd1\x83\',\n              textAlign: TextAlign.center,\n            ),\n            children: <Widget>[\n              TextButton(\n                child: Text(\'\xd0\x9f\xd1\x80\xd0\xbe\xd0\xb9\xd1\x82\xd0\xb8 \xd1\x80\xd0\xb5\xd0\xb3\xd0\xb8\xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd1\x86\xd0\xb8\xd1\x8e\'),\n                onPressed: () {\n                  Navigator.of(dialogContext).pop(); // Dismiss alert dialog\n                  Navigator.of(context).pushAndRemoveUntil(\n                      MaterialPageRoute(\n                          builder: (context) => MainScreen(currentIndex: 3)),\n                      (route) => false);\n                },\n                style: ButtonStyle(alignment: Alignment.center),\n              ),\n            ],\n          );\n        },\n      );\n    }\n    setState(() => _isLoading = true);\n    Future.delayed(\n      const Duration(seconds: 2),\n      () => setState(() => _isLoading = false),\n    );\n  }\nElevatedButton.icon(\n                      icon: _isLoading\n                          ? Container(\n                              width: 24,\n                              height: 24,\n                              padding: const EdgeInsets.all(2.0),\n                              child: const CircularProgressIndicator(\n                                color: Colors.white,\n                                strokeWidth: 3,\n                              ),\n                            )\n                          : const Icon(Icons.shopping_basket),\n                      onPressed: () => _onSubmit(),\n

\n

Answer 1

您需要像这样定义新变量：

\n

int selectedIndex = -1;\n

\n

然后将项目索引传递给您的项目并像这样使用它：

\n

ElevatedButton.icon(\n          icon: _isLoading && selectedIndex == index //<-- add this\n              ? Container(\n                  width: 24,\n                  height: 24,\n                  padding: const EdgeInsets.all(2.0),\n                  child: const CircularProgressIndicator(\n                    color: Colors.white,\n                    strokeWidth: 3,\n                  ),\n                )\n              : const Icon(Icons.shopping_basket),\n          onPressed: () {\n              selectedIndex = index;//<-- add this\n              _onSubmit();\n          },\n     )\n

\n

还记得重置selectedIndex完成后重置：

\n

selectedIndex = -1;\n

\n

感谢@Ivo，如果您想同时进行多个加载，则需要这种方法：

\n

首先定义 bool 列表，如下所示：

\n

List<bool> itemLoading = [];\n

\n

当您的项目列表准备好时，请使用默认值填充此列表，如下所示：

\n

itemLoading = List.generate(yourItemsList.length, (_) => false);\n

\n

那么您需要在您的项目中更新此列表，如下所示：

\n

ElevatedButton.icon(\n      icon: itemLoading[index] //<-- add this\n          ? Container(\n              width: 24,\n              height: 24,\n              padding: const EdgeInsets.all(2.0),\n              child: const CircularProgressIndicator(\n                color: Colors.white,\n                strokeWidth: 3,\n              ),\n            )\n          : const Icon(Icons.shopping_basket),\n      onPressed: () {\n          itemLoading[index] = true;//<-- add this\n          _onSubmit(index);\n      },\n )\n

\n

然后在你_onSubmit这样做：

\n

void _onSubmit(int index) {\n    if (Constants.USER_TOKEN != null && Constants.USER_TOKEN != '') {\n      print('NO');\n    } else {\n      showDialog<void>(\n        context: context,\n        builder: (BuildContext dialogContext) {\n          return SimpleDialog(\n            shape: RoundedRectangleBorder(\n                borderRadius: BorderRadius.circular(18.0)),\n            title: Text(\n              '\xd0\x9f\xd1\x80\xd0\xbe\xd0\xb9\xd0\xb4\xd0\xb8\xd1\x82\xd0\xb5 \xd1\x80\xd0\xb5\xd0\xb3\xd0\xb8\xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd1\x86\xd0\xb8\xd1\x8e, \xd1\x87\xd1\x82\xd0\xbe\xd0\xb1\xd1\x8b \xd0\xb4\xd0\xbe\xd0\xb1\xd0\xb0\xd0\xb2\xd0\xbb\xd1\x8f\xd1\x82\xd1\x8c \xd0\xb2 \xd0\xba\xd0\xbe\xd1\x80\xd0\xb7\xd0\xb8\xd0\xbd\xd1\x83',\n              textAlign: TextAlign.center,\n            ),\n            children: <Widget>[\n              TextButton(\n                child: Text('\xd0\x9f\xd1\x80\xd0\xbe\xd0\xb9\xd1\x82\xd0\xb8 \xd1\x80\xd0\xb5\xd0\xb3\xd0\xb8\xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd1\x86\xd0\xb8\xd1\x8e'),\n                onPressed: () {\n                  Navigator.of(dialogContext).pop(); // Dismiss alert dialog\n                  Navigator.of(context).pushAndRemoveUntil(\n                      MaterialPageRoute(\n                          builder: (context) => MainScreen(currentIndex: 3)),\n                      (route) => false);\n                },\n                style: ButtonStyle(alignment: Alignment.center),\n              ),\n            ],\n          );\n        },\n      );\n    }\n    Future.delayed(\n      const Duration(seconds: 2),\n      () => setState(() => itemLoading[index] = false),\n    );\n  }\n

\n