美文网首页记录自学flutter点点滴滴
Flutter 学习之旅(六) 基础控件 StateLes

Flutter 学习之旅(六) 基础控件 StateLes

作者: Tsm_2020 | 来源:发表于2020-08-11 08:34 被阅读0次

    看完了flutter基础篇之后已经停了将近一周没有继续写了,究其原因我觉得关于flutter接下来的学习就是控件了,但是控件如果系统的学起来还是比较有水平的,关于控件的绘制过程真的是看了好几篇博客,理解了一次又一次,不能说自己看不懂,应该是还没有具体实战过,对这种东西的理解还是比较片面,比如widget 绘制流程,如何高效的刷新控件,在什么时机会计算控件大小,什么时候调用print 方法,什么时候调用profromLayout 等等,看了整整一天只是明白了他们之间的关系,留下的这些问题我会在系统的学习自义定控件的时候将它吃透,前面这里我觉得最主要的应该是好好的看一下常用控件的源码与如何快速与合理的写出想要的布局.

    接下来我自己写了一个flutter控件的学习大纲,我会按照这个大纲来深入研究flutter控件,虽然说自己已经看了一遍了,但是觉得在写博客的时候还是有好多东西没有特别清楚他的含义,

    1.Scaffold  AppBar  这两个是重点,每个页面都离不开他
    
    2.Container    这是一个组装的控件,
    
    3.Row  Columu   Expanded  类似LinearLayout  权重的概念
    
    4.Text  TextField   RaisedButton    Padding  SizedBox  Icon  Image  CheckBox  普通的文本  按钮  图标 图片  勾选框  
    5.ListView    GridView  
    6.Scrollable  列表和长布局分析
    7.ListView    TabBar      BottomNavigationBar     PageView     类似首页多tab签与viewpage结合使用
    8.手势的捕捉和利用
    9.分析控件加载过程与  原理  (即Widget , element , renderObjent 的相爱相杀  )
     10.自义定控件
    

    说道控件,Flutter 中两个最基础控件 StatefulWidget 与 StatelessWidget

    StatefulWidget 例子

    image

    这里面有一个java不常用的语法 content ?? 'default value' 这句的意思就是content 不为空则使用content ,如果content为空则使用default value

    StatelessWidget 字面上面的意思就是这种控件只有一个显示装填,在整个生命周期中不会涉及到重新绘制,形态比较单一

    StatelessWidget 例子

    image

    相较于StatelessWidget StatefulWidget 由于可以更新状态,也就是可以刷新自身的显示装填,就多了一些方法,

    比如didUpdateWidget()这个方法,字面上的意思是如果这个控件的state发生变化了会回调这里,比较有意思的是,在我试验过程中并没有,

    从网上看了一些博客才找到答案,这个回调并不是当前widget,而是他的子widget 会走这个回调,试验了一下也是这个结果

    didChangeDependencies 这个方法从字面上的意思就是当被依赖的控件发生变化的时候,也就是父控件发生变化的时候才会调用,注意这里的变化不包含状态的变化,而是层级和结构发生变化

    我学习flutter的整个过程都记录在里面了
    https://www.jianshu.com/c/36554cb4c804

    最后附上demo 地址

    https://github.com/tsm19911014/tsm_flutter

    相关文章

      网友评论

        本文标题:Flutter 学习之旅(六) 基础控件 StateLes

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