美文网首页工作生活
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