Flutter 手势检测器 onTap 问题

Question

我是 Flutter 新手，我正在尝试制作井字游戏；尽管在 Flutter GestureDetector, onTap gets triggered automatically, how to? 中遵循相同的概念，但我还是有一些 ontap

我的代码最初用红色和空白文本返回网格单元

return Scaffold(
        appBar: AppBar(title: Text('Tic Tac Toe')),
        body: GridView.count(
          crossAxisCount: 3,
          crossAxisSpacing: 2.0,
          mainAxisSpacing: 2.0,
          children: List<Widget>.generate(
            9,
            (int index){
              return new GridCell(
                index:index,
                    color: Colors.red,
                    text:Text(' '),
                  );
            })));

那么gridcell的类是：

class GridCell extends StatefulWidget {
  final Color color;
 final Text text;
   final int index;


  GridCell({Key key, this.color,this.text,this.index}) : 
  super(key: key);

  @override
  GridCellState createState() {
    return new GridCellState();
  }
}

    class GridCellState extends State<GridCell> {
      Color cellColor=Colors.white;
      Text cellText=new Text(' ');
      String choice=' ';

      @override
         void initState() {
        super.initState();
        choice;
        cellColor=widget.color;
        cellText=widget.text;
      }
    //get text function to switch the x and o between the players
      String  _getText(){

        if (choice=='X'){
          choice='O';
        }
    else{
      choice='X';
    }
    return choice;
      }
    _changeCell(index) {
        setState(() {
          switch (index) {
            case 0:
              cellColor = Colors.lightBlue;
              cellText = new Text(choice);
              print(_getText());
              break;
            case 1:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                        print(_getText());
              print(_getText());

              break;
            case 2:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                        print(_getText());

              break;

            case 3:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                        print(_getText());

              break;
            case 4:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                                  print(_getText());

              break;
              case 5:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                                  print(_getText());

              break;
              case 6:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                                  print(_getText());

              break;
              case 7:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                                  print(_getText());

              break;
              case 8:
              cellColor = Colors.lightBlue;
              cellText = new Text(_getText());
                  print(_getText());

              break;


          }
        });
      }

      @override
      Widget build(BuildContext context) {
        return new GestureDetector(
         onTap:()=>_changeCell(widget.index),
         child:Container(
           height:20.0,
           color:Theme.of(context).primaryColor,
         ),
       );
      }
    }

预期的行为是出现 9 个 redgridcells，当我按下其中一个文本变为 X 并且其颜色变为浅蓝色时，第二次按下另一个单元格将显示文本 O，颜色为浅蓝色，第三个文本为 X 等等在。实际行为是 9 个蓝色网格单元，当我按下其中任何一个时，没有任何变化！

提前致谢：)

Answer 1

您收到错误，因为 choice 已初始化为 null 并且在将其与 Text(choice) 或条件语句一起使用之前从未真正具有值。

Answer 2

将 color: Colors.transparent, 添加到 GestureDetector 的 Container 子项

您的小部件将看起来：

@override
      Widget build(BuildContext context) {
        return new GestureDetector(
         onTap:()=>_changeCell(widget.index),
         child:Container(
           height:20.0,
           color:Theme.of(context).primaryColor,
         ),
       );
      }