如何在Dart/Flutter中从自己的回调函数(onPressed)中访问小部件(Widget)

Question

我有以下代码：

  @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() 回调中，我想改变按钮的样式 - 以表示洒水器的活动。

因此，我需要访问 MaterialButton Widget 本身。

但是我该如何在回调中访问它呢？

非常感谢您的帮助，对于这个初学者的问题，我很抱歉，我刚接触 Dart 和 Flutter ;)

- wzr1337

Answer 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;
          })
        },
      ),
    );
  }

- Bram Vanbilsen

---

我收到了以下错误： [dart] 类 '_SprinklerListItem' 中没有定义 'setState' 方法。 - wzr1337

这是一个 StatefulWidget 吗？ - Bram Vanbilsen

Answer 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;
    }),
  );
}

- Zev

Answer 3

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

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;
          });
        },
      ),
    );
  }
}

- wzr1337