无状态小部件内有状态小部件，反之亦然

发布于 2025-01-10 13:48:33 字数 198 浏览 2 评论 0 原文

在以下情况下，Flutter 重建/重绘如何工作：

在有状态小部件内创建无状态小部件。
在无状态小部件内创建有状态小部件。

每次有状态小部件状态更改时，有状态小部件内的无状态小部件是否都会渲染？

有状态小部件可以在无状态小部件内更改吗？它如何影响无状态小部件？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

離殇 2025-01-17 13:48:33

首先这里是flutter文档中无状态和有状态的区别

无状态小部件永远不会改变。 Icon、IconButton 和 Text 是无状态小部件的示例。无状态小部件子类 StatelessWidget。

有状态的小部件是动态的：例如，它可以更改其
响应由用户交互触发的事件或
当它接收到数据时。

对于第一个场景“在有状态小部件内创建无状态小部件”。

当我们更新 Stateful widget 的状态时，它将重新运行其构建函数，当无状态 widget 是该构建函数的一部分时，flutter 将检查其输入数据是否已更改，如果没有更改，它将返回相同的实例小部件，如果它发生了更改，那么它将从无状态小部件创建另一个实例并丢弃前一个实例。

以下是来自本文

对于第二个场景“在无状态小部件内创建有状态小部件”。

让我们首先尝试说明小部件树以直观地了解正在发生的情况。

              Stateless (1)
               /      \
              /        \
      (2) Stateful   Stateless (3)

如果我们更新有状态小部件 (2) 的状态，(1) 和 (3) 都不会受到影响，但有状态小部件中的构建函数将再次被调用。

如果父级 (1) 的输入发生变化，则 (1) 和 (2) 将再次重建，flutter 将检查 (3) 是否有输入数据更改，它也会重建，如果没有，它将返回相同的值实例。

希望这能回答您的问题，并使您更好地理解 flutter 如何渲染其 UI

注意：这是我目前对 flutter 处理重建有状态和无状态小部件的方式的理解，如果有任何不正确的地方，请随时纠正我。

First here is the difference between stateless and stateful from the flutter documentation

A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets. Stateless widgets subclass StatelessWidget.

A stateful widget is dynamic: for example, it can change its
appearance in response to events triggered by user interactions or
when it receives data.

For the first scenario "Creating a Stateless widget inside a Stateful widget."

when we update the state of the Stateful widget it will re-run its build function, when a stateless widget is part of that build function, flutter will check if its input data has changed or not, if not it will return the same instance of the widget, if it's changed then it will create another instance from the stateless widget and discard the previous one.

here is an illustration of the above scenario from this article

For the second scenario "Creating a Stateful widget inside a Stateless widget."

let's try to illustrate the widget tree first to visualize what's going on.

              Stateless (1)
               /      \
              /        \
      (2) Stateful   Stateless (3)

if we update the state of the stateful widget (2), both (1) and (3) won't get affected, but our build function in the stateful widget will be called again.

and if the input coming for the parent (1) changes, then (1) and (2) will be rebuilt again and flutter will check if (3) has input data changes it will be also rebuilt, if not it will return the same instance.

hope this answers your question and makes you better understand how flutter renders its UI

Note: this is my current understanding of the way flutter handles rebuilding stateful and stateless widgets, feel free to correct me if anything is not correct.

回复收藏 0 原文

~没有更多了~