如何在 Dart/Flutter 中从其自己的回调 (onPressed) 中访问 Widget答案

【问题标题】：How to access the Widget from within its own callback (onPressed) in Dart/Flutter如何在 Dart/Flutter 中从其自己的回调 (onPressed) 中访问 Widget
【发布时间】：2017-08-02 20:53:15
【问题描述】：

我有以下代码：

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 72.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
      decoration: new BoxDecoration(color: Colors.white),
      // Row is a horizontal, linear layout.
      child: new MaterialButton(
        child: new Text(
          _sprinkler.name,
          style: new TextStyle(color: Colors.white)
          ),
        splashColor: Colors.blueAccent,
        color: Colors.blue[800],
        onPressed: () {
          print("onTap(): tapped" + _sprinkler.name);
        },
      ),
    );
  }

onPressed()，我想改变 Buttons 样式 - 代表喷水器活动。

因此，我需要访问 MaterialButton 小部件本身。

但是如何从回调中访问它？

提前非常感谢，对于 n00b 问题，我很抱歉，我是 Dart 和 Flutter 的新手 ;)

【问题讨论】：

标签： dart flutter

【解决方案1】：

您可以将某些属性设为变量。然后您可以在您的onPressed() 中调用setState() 来更改属性变量。
此示例显示如何使用此方法更改按钮的文本颜色：

  Color textColor = Colors.white;
  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 72.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
      decoration: new BoxDecoration(color: Colors.white),
      // Row is a horizontal, linear layout.
      child: new MaterialButton(
        child: new Text(
          _sprinkler.name,
          style: new TextStyle(color: textColor)
          ),
        splashColor: Colors.blueAccent,
        color: Colors.blue[800],
        onPressed: () {
          this.setState(() {
            textColor = Colors.red;
          })
        },
      ),
    );
  }

【讨论】：

我收到以下错误：[dart] The method 'setState' isn't defined for the class '_SprinklerListItem'.
这是StatefulWidget吗？

【解决方案2】：

您可能想使用 StatefulWidget，如下所示：

class MyWidget extends StatefulWidget {
  _MyWidgetState createState() => new _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
  Color c = Colors.blue.shade500;

  Widget build() => new MaterialButton(
    color: c,
    onPressed: () => setState(() {
      c = Colors.red.shade500;
    }),
  );
}

【讨论】：

【解决方案3】：

感谢您的 cmets。正确的解决方案实际上是您推荐的，看起来像这样：

class SprinklerListItem extends StatefulWidget {
  // This class is the configuration for the state. It holds the
  // values (in this nothing) provided by the parent and used by the build
  // method of the State. Fields in a Widget subclass are always marked "final".
  final Sprinkler _sprinkler;
  SprinklerListItem(this._sprinkler);


  @override
  _SprinklerListItemState createState() {
    return new _SprinklerListItemState(this._sprinkler);
  }
}


class _SprinklerListItemState extends State<SprinklerListItem> {
  final Sprinkler _sprinkler;

  _SprinklerListItemState(this._sprinkler);

  Color textColor = Colors.white;
  Color bgColor = Colors.blue[800];
  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 72.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
      decoration: new BoxDecoration(color: Colors.white),
      // Row is a horizontal, linear layout.
      child: new MaterialButton(
        child: new Text(
          _sprinkler.name,
          style: new TextStyle(color: textColor)
          ),
        splashColor: Colors.blueAccent,
        color: bgColor,
        onPressed: () {
          this.setState(() {
            textColor = Colors.grey;
            bgColor = Colors.red;
          });
        },
      ),
    );
  }
}

【讨论】：