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

Question

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

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

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

通用变量为“_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 小部件代替 StatelessWidget。加法运算后，在 onPressed 函数上调用 setState() 方法。它将使用新值构建您的小部件。

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

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

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

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

How to display text in 'Text' widget after flatButton press?

dart

flutter

statelesswidget