将文本传递给 RaisedButton OnTap - Flutter答案

【问题标题】：Pass Text to RaisedButton OnTap - Flutter将文本传递给 RaisedButton OnTap - Flutter
【发布时间】：2019-08-17 13:15:41
【问题描述】：

我是 Flutter 新手，在玩井字游戏时遇到了很多麻烦。它可以在控制台中运行，但我不知道如何让游戏在我构建的 GUI 中运行。

我知道我需要一些用于游戏按钮的数组，但我不确定如何实现它。我用这样的行和列构建了游戏板：

      body: new Container(
          padding: EdgeInsets.all(14.0),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Row(
                  //Start of the 1st Row
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      // Button 0 in 1st Row
                      RaisedButton(
                        padding: const EdgeInsets.all(20.0),
                        onPressed: () {
                          _button0();
                        },
                        child: new Text(_mBoard[0],
                            textAlign: TextAlign.center,
                            style: new TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 40.0,
                              fontFamily: 'Roboto',
                            )),
                        color: Colors.grey[300],
                      ),

这是在第一个 RaisedButton 的 onPressed 函数中调用的 _button0。最高可达 8。

  void _button0() {
    setState(() {
      if (_mBoard[0] == humanPlayer || _mBoard[0] == computerPlayer) {
        return;
      } else if (win == 0) {
        if (turn == 0) {
          _mBoard[0] = humanPlayer;
          _text = humanPlayer + " MOVED, O's TURN";
          turn = 1;
          win = checkWinner();
          checkGameOver(win);
          displayBoard();
        }
        if ((turn == 1) && (win == 0)) {
          turn = 0;
          computerTurn();
          win = checkWinner();
          checkGameOver(win);
          displayBoard();
        }
      }
    });
  }

打印板到控制台：

void displayBoard() {
  print(_mBoard[0] + " | " + _mBoard[1] + " | " + _mBoard[2]);
  print("-----------");
  print(_mBoard[3] + " | " + _mBoard[4] + " | " + _mBoard[5]);
  print("-----------");
  print(_mBoard[6] + " | " + _mBoard[7] + " | " + _mBoard[8]);
}

我希望用户对 RaisedButton 的选择会显示“X”，而计算机的选择会显示“O”。

【问题讨论】：

标签： dart flutter flutter-layout

【解决方案1】：

您在 setState() 中包含了 _mBoard 值更新的部分和 displayBoard() 方法。一旦你调用 setState()，它会通知 StatefulWidget 更新视图。但是你在 setState 中调用 displayBoard()，而这个方法还没有更新 _mBoard 值。

有两种方法可以解决这个问题，

将 _mBoard 作为参数传递给 displayBoard(_mBoard) ，因此它将访问本地 _mBoard 值而不是状态值。
在调用 setState() 后调用 displayBoard。

【讨论】：

感谢您的回答！我尝试将 _mBoard 传递给每个 _button 的 displayBoard：void _button0(String mBoard)...displayBoard(_mBoard[0])。然后对于每个 RaisedButton 的 onPressed: onPressed: () { _button0(_mBoard[0]);}。但是游戏板仍然只在控制台中打印。这是实现它的正确方法吗？
从上面的代码中，我看不到你渲染板视图的部分。你能告诉我你实际传递 _mBoard 来构建视图的部分吗？
我实际上想出了如何去做。我将 _mBoard 传递到每个 RaisedButton 小部件中。我在上面更新了它： new Text(_mBoard[0],... 这允许显示按钮和“X”或“O”。感谢您的帮助！