Flutter:更新同级小部件的状态 [英] Flutter: Update state of sibling widget

问题描述

如何在Flutter中更新同级小部件的状态?

How do you update the state of a sibling widget in Flutter?

例如，如果我有一个矩形小部件，则可以通过调用setState()并更改color变量(如下面的"Turn Green"按钮那样)来从小部件内部更改其颜色.但是，说我想要一个在矩形外部的按钮，它将改变其颜色.我该如何与Rectangle交流该更改其颜色以及更改为哪种颜色的时间?

For example, if I have a rectangle widget, I can change its color from within the widget by calling setState() and changing the color variable (as the "Turn Green" button does below). But, say I wanted a button outside of the rectangle that would change its color. How do I communicate to the Rectangle that it's time to change its color, and what color to change to?

这是我的示例代码.当用户按下"Turn Blue"按钮时，我希望矩形变为蓝色，但是我无法从同级窗口小部件访问其状态.

Here is my sample code. When the user presses the "Turn Blue" button, I'd like the rectangle to turn blue, but I don't have access to its state from the sibling widget.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Hello Rectangle',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Rectangle'),
        ),
        body: Column(
          children: <Widget>[
            HelloRectangle(),
            FlatButton(
            child: Text('Turn Blue!',
              style: TextStyle(fontSize: 40.0),
              textAlign: TextAlign.center,
            ),
            onPressed: () {
              // How to update state of the Rectangle from here?
            },
          ),
          ]
        ),
      ),
    ),
  );
}

class HelloRectangle extends StatefulWidget {
  @override
  HelloRectangleState createState() {
    return new HelloRectangleState();
  }
}

class HelloRectangleState extends State<HelloRectangle> {
  Color _color;

  @override
    void initState() {
      super.initState();
      _color = Colors.red;
    }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: _color,
        height: 400.0,
        width: 300.0,
        child: Center(
          child: FlatButton(
            child: Text('Turn Green!',
              style: TextStyle(fontSize: 40.0),
              textAlign: TextAlign.center,
            ),
            onPressed: () {
              // I can update the state from here because I'm inside the widget
              setState(() {
               _color = Colors.green;
              });
             },
          ),
        ),
      ),
    );
  }
}

推荐答案

经验法则是，您不能访问层次结构中不在您之上的任何Widget的状态.因此，基本上，我们需要将状态(颜色)上移到祖先.介绍一个StatefulWidget，该对象构建Scaffold或Column并在其中存储矩形颜色.现在，矩形小部件不再需要存储颜色，因此可以成为无状态小部件-您可以通过构造函数传递颜色.现在，两个onPressed回调都可以在新的StatefulWidget上调用setState的方法. (除其他方法外，您还可以将该方法传递给矩形小部件.)

The rule of thumb is that you can't access the state of any Widget that isn't above you in the hierarchy. So, basically we need to move the state (color) up to an ancestor. Introduce a StatefulWidget that builds the Scaffold or Column and store the rectangle color there. Now the rectangle widget no longer needs to store the color, so can become a stateless widget - and you can pass the color in through the constructor. Both onPressed callbacks can now call a method on the new StatefulWidget which calls setState. (You could pass that method down to the rectangle widget, amongst other ways.)

在此处和 查看全文