* 一个安卓开发如何学习Flutter(愚见 第一节,可能有不对的地方,会不断优化修改)
* * Flutter 基于Widget(我们可以这样说 对于Android 的View)
* * * 在Android 的View 大部分时间 是一个页面显示,更新数据,对于Widget 的角色比较多样,我们自己写的部分wigdet 相当 我们常写的Fragment, 我通过学习flutter了解到,页面是一个大的wigdet,大的wight 由小的widget组成。
* 快速学习flutter
第一步先了解 flutter 中常间的几个类
1. StatefulWidget
2. StateLessWidget
3. State
* * StateLessWidget (一个没有状态的小部件) 可以这样理解一个简单用于显示的View,页面不更新数据,一次初始化。
* * StatefulWidget (一个由状态的小部件) 可以这样理解类似集成了databinding的view(mvvp) mode中的数据改变更新更新UI,如Vue.js 或者react.js 用到这种思想。 在flutter中谁扮演了databinding的角色了,答案是State这个类
* * State 和StatefulWidget 配合使用。
第二步了解了上面的核心内,现在我们一般会快速的想上手写一个页面。
好现在开始,flutter 提供了各种自带的小widget
我们先从布局开始:
1. android 中Linearlayout 相对flutter中的 Row(对应水平 布局),Column(对应垂直布局)
2. android 中Framlayout 对应flutter 中的stack(通过字面含有就是堆,可以互相重叠堆在一起)
3. Android 中RelativeLayout 在flutter 中没有找到想对应的,不过flutter 提Row+Flexible,或者Column+Flexible(有弹性的部件),可以实现相关的效果,,在flutter 中我们会经常用到集成Flexible 的子类Expanded,(学习这些提供的widget的时候,他们的相关属性或者功能,可以自己点击这个类,查看源码的注解,如:
Expanded )
第三步了解和使用常见的部件:
1. Row
2. Column
3. Stack
4. Form
5. Text
5. Image
6. Container
7. Scaffold (类似一个初始化的Activity 页面布局)
8. Card
9. Padding
10. Positioned(一般和stack结合使用)
等等,学习这些类使用方法结合官网的demo 和源码里相关的解释,在结合我们平常开发常见的布局进行对面,寻找类似的控件。flutter提供的widget 比较多,相比原生的布局,实用的更多。
网友评论