dart - 按下 flatButton 后如何在 'Text' 小部件中显示文本？

Question

我正在尝试使用 flutter 制作一个计算器应用程序，而不是通过键盘输入我想通过一些按钮输入。当我按下一个按钮但它没有在上面的文本小部件中显示相应的数据时，问题就来了。

除了第一个 MyApp 类是有状态的，我的所有类都是无状态的。

我尝试在所有类之外创建一个通用变量，并使用它来将文本从按钮类传输到显示类，但这没有用。

通用变量是“_calcText”

class DisplayAnswer extends StatelessWidget {

  final String _text;

  DisplayAnswer(this._text);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 2,
      child: Material(
        color: Colors.greenAccent,
        child: Ink(
          padding: EdgeInsets.all(10.0),
          child: Center(
            child: Container(
              constraints: BoxConstraints.expand(),
              decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 5.0), color: Colors.white),
              child: Text(_text,style: TextStyle(fontSize: 50.0), textAlign: TextAlign.center,),
            ),
          ),
        ),
      ),
    );
  }
}


class NumButtons extends StatelessWidget {
  final String _number;

  NumButtons(this._number);

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: () {
        _calcText = _calcText + _number;
        print(_calcText);
        DisplayAnswer(_calcText);
      } ,
      child: Text(_number.toString(), style: TextStyle(fontSize: 30.0),),
      color: Colors.white
    );
  }
}

我想在 DisplayAnswer 的文本小部件中显示 _calcText 的值。我希望 _calcText 在单击其他按钮时也发生变化，即；如果点击 2 文本应该只显示 2，如果点击 5 之后它应该显示 25

完整代码在这里: https://drive.google.com/open?id=1C4MLAkjowloicbjBP_uV8BfpPzhz4Yxf

Answer 1

使用 Statefull widget 代替 StatelessWidget。 加法运算后，在onPressed 函数上调用setState() 方法。它将使用新值构建您的小部件。

在 DisplayAnswer 上，您必须创建一个函数来增加值，而不是将此函数作为参数传递给 NumButtons。

将回调 Function 传递给 NumButtons，例如:

class NumButtons extends StatelessWidget {
  final String _number;
  final Function callback;
...