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

时间:2017-08-02 20:53:15

标签: dart flutter

我有以下代码:

  @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本身。

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

非常感谢,对n00b问题感到抱歉,我是Dart和Flutter的新手;)

3 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分: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;
    }),
  );
}

答案 2 :(得分:2)

感谢您的评论。正确的解决方案是你推荐的,看起来像这样:

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