Flutter基础----Widget
Widget是什么
- widget相当于Android中的View,iOS中的UIView
- widget中的渲染类似于React框架,当Widget状态发生改变,需要刷新界面时。框架会计算从上一个状态到下一个状态所需的最小的改变,然后进行reload。
Flutter Framework中的Widget
Flutter 分为Material 和 Cupertino两种,前者是适用于Android风格,后者适用于iOS风格。
- 在Widget下面分为:
- Rendering(渲染层)
- Rendering下分为:Animation(动画)、Painting(绘制)、Gestures(手势)
- 最后是Fundaton(基础层)
以上在开发过程中不经常使用。经常使用的是widget上层:Material和Cupertino
根widget
在flutter中根Widget只能是以下三个
- WidgetsApp:可以自定义风格的根widget
- MaterialApp:MaterialApp 是在 WidgetsApp 上添加了很多 material-design 的功能,是 Material Design 风格的 根Widget。
- CupertinoApp:CupertinoApp 也是基于 WidgetsApp 实现的 iOS 风格的 根Widget。
这三个中最常用的是 MaterialApp,因为 MaterialApp 的功能最完善。MaterialApp 经常与 Scaffold 一起使用。
Widget标识符key
Flutter采用的是react-style的框架,每次刷新UI的时候,会重新新的widget树,和之前的widget树进行对比,计算出变化的部分。这个过程称为diff。如果能在这这个过程中知道哪些Widget需要变化,会大大提升性能,这就用到了标识符。
如何知道Widget有没有变化呢?
- 需要给widget添加一个标识符,在diff的过程中刷新后的widg的key和刷新前的widget的key没有变化那么这个widget就没有变化。如果key不存在了或者变了,那么这个widget就变化了。
key的分类
- 1、Local Key(局部key):在具有相同父widget中,key必须是唯一的叫做局部key。局部Key 在 Flutter 中对应的抽象类是 LocalKey。LocalKey 有不同的实现,主要的区别就是使用什么值来作为 Key 的值:ObjectKey(将对象作为key)、ValueKey(将特定类型的值作为key)、UniqueKey(使用unique自己的对象最为key,和自身相等)
- 2、Global Key(全局key):全局Key 是在整个APP中唯一的 Key。全局Key 在 Flutter 中对应的抽象类是 GlobalKey。GlobalKey 有不同的实现,主要区别是使用的场景不同:LabeledGlobalKey(LabeledGlobalKey 用于调试,不会用来比较 Widget 是否有变化。)、GlobalObjectKey(将对象作为 Global Key 的值。)
一般情况下我们不需要使用 Key,但是当页面比较复杂时,就需要使用 Key 去提升渲染性能。
Widget的分类
Flutter 为了节省渲染资源,根据 UI 是否有变化,将 Widget 分为:
StatelessWidget
- StatefulWidget 是 UI 可以变化的 Widget,创建完后 UI 还可以在更改。
StatelessWidget
- StatelessWidget 是 UI 不可以变化的 Widget,创建完后 UI 就不可以在更改。
Widget的使用
- StatefulWidget 与 StatelessWidget
Flutter 的大部分 Widget 都可以分为 StatefulWidget 和 StatelessWidget 这两类,所以要弄懂 StatefulWidget 与 StatelessWidget 的区别和使用范围。
- MaterialApp 与 Scaffold
MaterialApp 大部分情况下要作为 Flutter 的 根Widget,并且 MaterrialApp 经常和 Scaffold 搭配一起使用。