Question

我在Flutter中遇到setState（）问题。我只是编写了一个简单的程序，其中包含一个容器和一个按钮，容器的颜色是全局变量mycolor，我使用setState在按钮的on_pressed函数中对其进行了更改，但它没有改变。

    import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: _Home(),));

Color bgColor = Colors.red;


class _Home extends StatefulWidget {
  @override
  __HomeState createState() => __HomeState();
}

class __HomeState extends State<_Home> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        //First Widget
        Container(
          width: 200,
          height: 200,
          color: bgColor,
        ),
        //Second Widget
        SecondWidget()
      ],
    );
  }
}

class SecondWidget extends StatefulWidget {
  @override
  _SecondWidgetState createState() => _SecondWidgetState();
}

class _SecondWidgetState extends State<SecondWidget> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("Change color"),
      onPressed: (){
        setState(() {
         bgColor = Colors.green; 
        });
      },
    );
  }
}

image of my program

Answer 1

您在setState中调用_SecondWidgetState而不是在__HomeState中调用，因此只有SecondWidget重绘，并且它不依赖于bgColor。
您可以在此处执行的操作：最简单的选择是将回调函数从__HomeState传递到SecondWidget，该回调函数将在setState内部调用__HomeState。
示例代码：

class __HomeState extends State<_Home> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        //First Widget
        Container(
          width: 200,
          height: 200,
          color: bgColor,
        ),
        //Second Widget
        SecondWidget(callSetState);
      ],
    );
  }

  void callSetState() {
    setState((){}); // it can be called without parameters. It will redraw based on changes done in _SecondWidgetState
  }
}

class SecondWidget extends StatefulWidget {

  final Function onClick;

  SecondWidget(this.onClick);

  @override
  _SecondWidgetState createState() => _SecondWidgetState();
}

class _SecondWidgetState extends State<SecondWidget> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("Change color"),
      onPressed: (){
        bgColor = Colors.green; 
        widget.onClick();
      },
    );
  }
}

这是两个小部件的简单解决方案，但是如果尝试更大程度地管理状态，则会遇到问题。我建议您阅读有关flutter中状态管理的文章。 This one可能是一个好的开始。

Answer 2

您需要将该变量传递给同级小部件SecondWidget()。

首先，您需要像这样在SecondWidget上声明它：

class SecondWidget extends StatefulWidget {

Color backgroundColor;

SecondWidget({Key key, @required this.backgroundColor}) : super(key: key);

  @override
  _SecondWidgetState createState() => _SecondWidgetState();
}

您需要将该颜色从_HomeState传递到SecondWidget，您需要这样做：

class __HomeState extends State<_Home> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        //First Widget
        Container(
          width: 200,
          height: 200,
          color: bgColor,
        ),
        //Second Widget
        SecondWidget(backgroundColor: bgColor) // Here you pass that color
      ],
    );
  }
}

然后在您的SecondWidgetState上，您可以使用setState()更新其他小部件颜色，如下所示：

setState(() {
 widget.backgroundColor = Colors.blue;
});

希望这有助于解决您的问题。

在Flutter中使用setState更改变量

2 个答案: