flutter - 如何在Flutter中替换GridView中的特定项目？

Question

我有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,
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        );
      }

Answer 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,
                          ),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        );
      }
}