为什么父StatefulWidget中的setState不会更新子StatefulWidget

时间:2020-10-12 16:10:11

标签: flutter dart flutter-layout statefulwidget

我知道,从父StatefulWidget更新子StatefulWidget的正确方法是使用子GlobalKey实例。

但是我不明白,为什么setState((){})不做同样的事情!我没有找到任何文档或解释。

来自documentation

调用setState会通知框架内部状态 该对象的更改方式可能会影响用户界面 在此子树中,这将导致框架为 这个State对象。

如果您仅直接更改状态而不调用setState,则 框架可能不会安排构建,为此用户界面 子树可能不会更新以反映新状态。

通过文档,我希望整个小部件子树都将被更新。但这不是。

请告诉我, 为什么下面的示例无法按预期工作 (更改ChildStatefulWidget的文本)。 谢谢!

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class ParentStatefulWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ParentState();
  }
}

class ParentState extends State<ParentStatefulWidget> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GestureDetector(
          child: Container(
              color: Colors.lightBlue,
              padding: EdgeInsets.all(10),
              child: Text(
                "Tap me",
                style: TextStyle(color: Colors.white, fontSize: 24),
              )),
          onTap: () {
            setState(() {
              counter = counter + 1;
            });
          },
        ),
        ChildStatefulWidget(
          text: "Count: $counter",
        )
      ],
    );
  }
}

class ChildStatefulWidget extends StatefulWidget {
  final String text;

  ChildStatefulWidget({Key key, this.text = ""}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return ChildState(text);
  }
}

class ChildState extends State<ChildStatefulWidget> {
  final String text;

  ChildState(this.text);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(fontSize: 18),
    );
  }
}

1 个答案:

答案 0 :(得分:1)

您无需在childState中创建“文本”-只需输入“ widget.text”即可:

class ChildState extends State<ChildStatefulWidget> {    
  @override
  Widget build(BuildContext context) {
    return Text(
      widget.text,
      style: TextStyle(fontSize: 18),
    );
  }
}

您的代码不起作用,因为您发送了值抛出构造函数,但是每次更改状态时构造函数都不会调用。因此,getted throw构造函数的值不会改变。