Flutter：更改网格视图中列的图像

Question

我对 Flutter 应用程序开发还比较陌生。我正在尝试构建一个简单的 Tic Tac Toe 游戏。我添加了一个 GridView 来模拟 3 x 3 网格。现在，每一列都是一个圆形图标。我想根据玩家的回合将其更改为“X”或“O”。如何在确定轮到谁后将特定图像放在特定列中？

这是代码：

@override
  Widget build(BuildContext context) {
    Container variable = Container(
      decoration: BoxDecoration(
        color: Colors.amber,
        shape: BoxShape.circle,
      ),
    );

    if (headline == '') {
      headline = "Home Page";
    }
    if (MediaQuery.of(context).orientation == Orientation.portrait) {
      return (Scaffold(
        appBar: AppBar(
          title: Text(authUser.currentUser.email),
        ),
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: ListView(
            children: <Widget>[
              Padding(padding: EdgeInsets.all(20)),
              Align(
                alignment: Alignment.center,
                child: Text(
                  'Player 1 (0 - 0) Player 2',
                  style: TextStyle(color: Colors.blue, fontSize: 22),
                ),
              ),
              Padding(padding: EdgeInsets.all(20)),
              Container(
                margin: EdgeInsets.all(15),
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 2,
                child: GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      mainAxisSpacing: 15,
                      crossAxisSpacing: 15,
                      crossAxisCount: 3),
                  itemBuilder: (context, index) {
                    if (index == 1 || index == 3 || index == 5 || index == 7) {
                      return GestureDetector(
                        onTap: () => onClickOdd(context, index),
                        child: InkWell(
                            onTap: () {
                              variable = (Container(
                                decoration: BoxDecoration(
                                  color: Colors.red,
                                  shape: BoxShape.circle,
                                ),
                              ));
                            },
                            child: variable),
                      );
                    } else {
                      return GestureDetector(
                        onTap: () => onClickEven(context, index),
                        child: InkWell(
                            onTap: () {
                              variable = (Container(
                                decoration: BoxDecoration(
                                  color: Colors.pink,
                                  shape: BoxShape.circle,
                                ),
                              ));
                            },
                            child: variable),
                      );
                    }
                  },
                  itemCount: 9,
                ),
              ),
              Container(
                height: 65,
                margin: EdgeInsets.only(
                    top: 50, left: 130, right: 130, bottom: 120),
                child: ButtonTheme(
                  minWidth: 60,
                  height: 100,
                  child: RaisedButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(40)),
                    onPressed: () {
                      //Navigator.pushNamed(context, '/home');
                    },
                    child: Text(
                      'Button',
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ));
    } else {
      return (Scaffold(
        appBar: AppBar(
          title: Text(authUser.currentUser.email),
        ),
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.black,
          child: Row(
            children: [
              Container(
                width: MediaQuery.of(context).size.width * 0.5,
                height: MediaQuery.of(context).size.height,
                color: Colors.blue[100],
              ),
              Container(
                width: MediaQuery.of(context).size.width * 0.5,
                height: MediaQuery.of(context).size.height,
                color: Colors.white,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  child: GridView.builder(
                    padding: EdgeInsets.only(top: 40),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        mainAxisSpacing: 10,
                        crossAxisCount: 3,
                        childAspectRatio: 1.8),
                    itemBuilder: (context, index) => GestureDetector(
                        onTap: () => onClickEven(context, index),
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.blue[400],
                            shape: BoxShape.circle,
                          ),
                        )),
                    itemCount: 9,
                  ),
                ),
              ),
            ],
          ),
        ),
      ));
    }
  }

P.S：抱歉，您发现部分代码重复，我正在尝试根据设备的方向设计不同的布局。

这是我得到的输出： Current Layout

谢谢！

Output Image

Answer 1

你可以在这里使用一个逻辑，逻辑是使它成为偶数奇数的情况，假设如果索引是 0 它意味着它偶数然后放在这里 0 ，如果 1 那么数字是奇数放在这里 x.

Flutter：更改网格视图中列的图像

Flutter: Change image of a column in a grid view

flutter

flutter-layout

tic-tac-toe