美文网首页工作生活
Flutter StatelessWidget 与 Statef

Flutter StatelessWidget 与 Statef

作者: 尤先森 | 来源:发表于2019-07-03 16:20 被阅读0次

在我们创建好一个flutter项目,系统会为我们自动写上一个点击事件,我们每按一次 + 按钮,中间的数字就 +1 。今天我们就对这个点击事件讨论讨论。

根据Flutter中文网的介绍

StatelessWidget 没有内部状态。 IconIconButton, 和Text 都是无状态widget, 他们都是 StatelessWidget的子类。

StatefulWidget 是动态的。 用户可以和其交互 (例如输入一个表单、 或者移动一个slider滑块),或者可以随时间改变 (也许是数据改变导致的UI更新)。 Checkbox, Radio, Slider, InkWell, Form, and TextField 都是 stateful widgets, 他们都是StatefulWidget的子类。

简单总结一下,当我们的Widget是StatelessWidget,那么当他的内容被创建出来之后,就不能再改变了。相反StatefulWidget就可以。

状态State

既然StatelessWidget 与 StatefulWidget的区别就在于这个状态,那么我们就看看什么是状态。

根据官方文档可以知道

  • widget的状态(state)是一些可以更改的值,如一个slider滑动条的当前值或checkbox是否被选中。
  • widget的状态保存在一个State对象中, 它和widget的布局显示分离。
  • 当widget状态改变时,State 对象调用setState(),告诉框架去重绘widget。

再简单总结一下,widget的状态保存在State中,存的是可变值,要令UI发生改变需要调用setState()。

既然如此,那我们就来分别调用一下setState()。

  • StatelessWidget
    首先,我在StatelessWidget中尝试调用一下setState(),编译器直接提示报错了,没有这个方法。


    image.png
  • StatefulWidget
    如下图,可以看出,在StatefulWidget中,创建了State,然后setState(),调用起来至少编译器没有提示错误。

    image.png
    可见,setState()方法依赖于 State这个扩展,如果没有这个扩展,就没办法使用setState(),command + 鼠标点击State也可以在State相关API中找到相关的方法信息。
    image.png

相关文章

网友评论

    本文标题:Flutter StatelessWidget 与 Statef

    本文链接:https://www.haomeiwen.com/subject/qhtchctx.html