如何在 Flutter 中替换 GridView 中的特定项目？答案

【问题标题】：How to replace a specific item in a GridView in Flutter?如何在 Flutter 中替换 GridView 中的特定项目？
【发布时间】：2020-08-13 15:18:32
【问题描述】：

我有一个包含 8 个元素的 gridView。当点击网格中的任何项目时，我正在尝试更改网格中特定元素的颜色，即：

例如：如果我点击第一个方块，颜色应仅从第一个方块的红色变为蓝色，其余部分应保持红色。这是我的网格的样子：

这是我的代码：

 Widget grid(context) {
        return Padding(
          padding: EdgeInsets.only(
              top: MediaQuery.of(context).size.height * 0.1, left: 5, right: 5),
          child: GridView.count(
            crossAxisSpacing: 15,
            mainAxisSpacing: 20,
            padding: EdgeInsets.all(10),
            crossAxisCount: 2,
            children: List<Widget>.generate(
              8,
              (index) {
                return Container(
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(0)),
                    boxShadow: <BoxShadow>[
                      BoxShadow(
                        color: Colors.transparent,
                        offset: Offset(0, 0),
                        spreadRadius: 0,
                        blurRadius: 0,
                      ),
                    ],
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(6.0),
                    child: GridTile(
                      child: InkWell(
                        onTap: () {
                          scratchCardDialog(context, scratchReward);
                        },
                        child: Container(
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        );
      }

【问题讨论】：

标签： flutter user-interface dart

【解决方案1】：

您可以使用_currentIndex 属性（如下代码）在setState 方法中更改所选卡片的颜色：

    class Test extends StatefulWidget {
      @override
      _TestState createState() => _TestState();
    }
    
    class _TestState extends State<Test> {
      int _currentIndex;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Padding(
            padding: EdgeInsets.only(
                top: MediaQuery.of(context).size.height * 0.1, left: 5, right: 5),
            child: GridView.count(
              crossAxisSpacing: 15,
              mainAxisSpacing: 20,
              padding: EdgeInsets.all(10),
              crossAxisCount: 2,
              children: List<Widget>.generate(
                8,
                (index) {
                  return Container(
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadius.all(Radius.circular(0)),
                      boxShadow: <BoxShadow>[
                        BoxShadow(
                          color: Colors.transparent,
                          offset: Offset(0, 0),
                          spreadRadius: 0,
                          blurRadius: 0,
                        ),
                      ],
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(6.0),
                      child: GridTile(
                        child: InkWell(
                          onTap: () {
                            setState(() {
                              _currentIndex = index;
                            });
                            scratchCardDialog(context, scratchReward);
                          },
                          child: Container(
                            color:
                                _currentIndex == index ? Colors.blue : Colors.red,
                          ),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        );
      }
}

【讨论】：

【解决方案2】：

生成一个 bool 列表作为 State 成员：

var cards = List.generate(8, (_) => false)

现在，您可以将卡片的颜色设置为cards[index] ? Colors.blue : Colors.red

要在点击卡片时更新值，请执行setState(() => cards[index] = true);

如果您希望它是可恢复的：setState(() => cards[index] = !cards[index]);

【讨论】：