如何在颤振中重建父小部件？答案

【问题标题】：How to rebuild parent widget in flutter?如何在颤振中重建父小部件？
【发布时间】：2021-06-15 13:42:40
【问题描述】：

这是一个测试，如果子容器为绿色，则父小部件变为绿色。

一开始它们都是蓝色的，当点击孩子时，它们都应该变成绿色。

当它被按下时，孩子会改变颜色。

class ColoredSquare extends StatelessWidget {
      ColoredButton button = ColoredButton();
      @override
      Widget build(BuildContext context) {
        return Scaffold(body: Column(children: [

        button, 
        Container(width: 50, height: 50, color: button.color == Colors.blue ? Colors.blue : Colors.green,)]
 ) );

  }


}

class ColoredButton extends StatefulWidget {
  Color color = Colors.blue;    
  @override
  _TestState createState() => _ColoredButtonState();
}

class _ColoredButtonState extends State<Test> {

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: (){setState(() {
          widget.color = Colors.green;

        });}

        ,child: Container(width: 50, height: 50, color: widget.color,));

  }
}

问题是，如果我通过单击更改子小部件的状态（颜色），它的状态将更新，这意味着它会很好地改变颜色。但是，父级将保持相同的颜色，因为它没有重建，它不知道子级已更新。

如何强制父级重建？

【问题讨论】：

因为你的父母是一个无状态的小部件，你不能改变它的颜色。您必须改用 StatefulWidget。否则，您可以使用从子级到父级的回调函数。或者您的子小部件可以使用 ChangeNotifier 来触发父级中的侦听器。

标签： flutter dart

【解决方案1】：

给child传一个函数，返回click事件调用给parent，parent会更新自己和child的颜色。

矩形类

class Rectangle extends StatefulWidget {
  @override
  _RectangleState createState() => _RectangleState();
}

class _RectangleState extends State<Rectangle> {
  Color color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(mainAxisSize: MainAxisSize.min, children: [
        Test(
          color: color,
          onTap: () {
            print('Rectangle called');
            setState(() {
              color = Colors.green;
            });
          },
        ),
        Container(
          width: 50,
          height: 50,
          color: color,
        )
      ]),
    ));
  }
}

测试类

class Test extends StatefulWidget {
  final Function() onTap;
  Color color;

  Test({Key? key, required this.onTap, required this.color}) : super(key: key);

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

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          print('Test called');
          widget.onTap();
        },
        child: Container(
          width: 50,
          height: 50,
          color: widget.color,
        ));
  }
}

【讨论】：