使用设置状态功能更新小部件

时间:2020-06-02 14:39:06

标签: flutter

我需要对setState()函数进行一些说明。 我将问题分为3个,但它们全都与setState()有关。

  1. 调用setState时,应用程序或 上下文(?)是否被重新渲染/更新?
  2. setState(() {/* MY CODE */});内的代码对/* myCode;*/ setState(() {});的重要性是什么
  3. 如果我要更新setState函数中的一些变量 像:setState(() { myText='dfg';})和这个变量 更新小部件Text(myText)setState将如何知道如何更新 文本小部件?

例如,在以下经典代码中:

    return Scaffold(
      appBar: AppBar(
        title: Text('Sample Code'),
      ),
      body: Center(
        child: Text('You have pressed the button $_count times.'),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Container(
          height: 50.0,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _count++;
        }),
        tooltip: 'Increment Counter',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

在bottomNavigationBar小部件中调用了setState()(因此该小部件被标记为脏的),所以为什么我们可以在Text小部件中看到与子... body相关的更新

1 个答案:

答案 0 :(得分:2)

1-当您调用setState()方法时,只有该小部件才能重新构建。

  • 我不想使事情变得复杂,但是该规则有一个例外,那就是在使用适应状态提升技术时,该技术会导致每次重新绘制多个小部件时消费者小部件对祖先进行回调以重建状态。我将在下面显示一个图,希望它可以使它更清晰,但是如果它看起来很复杂,则您不必担心它,因为无论如何您都不会使用该技术,因为有些方法变得越来越简单。 / li>

enter image description here

2-没什么区别,将已更改的代码放入setState()方法内部更有意义,表明这些是已更改的变量。

3-当您像这样的示例中呼叫setState()setState(() => _count++);不会将调用setState方法的窗口小部件标记为脏,而不是依赖于该状态的窗口小部件(此处的状态为_count变量)被标记为脏,因此,框架下一次调用build方法时,框架将看到Text小部件,该小部件使用_counter变量为脏变量,因此将其重绘,下面的图显示了您的小部件树并解释了它的完成方式 enter image description here