【备战春招】第4天 Flutter入门基础知识

课程名称：Flutter从入门到进阶 实战携程网App 一网打尽核心技术
课程章节：Flutter入门：基础知识十六讲
课程讲师：CrazyCodeBoy

课程内容

Flutter的插件可以在官网页面中进行查找，每个插件的详情页面里，都有 github 的库，如果遇到问题，可以去插件对应的 github 库的 issue 页面下寻找解决方案。

在Flutter中，widget主要分为两类：StatefulWidget（有状态的组件）和 StatelessWidget（无状态的组件）。查看 StatelessWidget 和 StatefulWidget 源码会发现，两个类都继承自 Widget，StatefulWidget 比 StatelessWidget 多一个 State 属性，所以调用state.setState()方法实现界面元素的刷新，正式对这个 State 状态的修改。

StatelessWidget相关组件

StatelessWidget 是一个不需要状态更改的widget，即它没有要管理的内部状态。当用户界面不依赖于对象本身中的配置信息以及widget的BuildContext时，无状态widget非常有用。

Container、Text、Icon、CloseButton、BackButton、Chip、Divider、Card 和 AlerDialog 都是 StatelessWidget的子类。

• Container，相当于 Android 中的各种 Layout 容器，可以设置背景、边框、阴影、内边距外边距等；
• Text，相当于 Android 中的 TextView，可以设置文本内容，字体样式等；
• Icon，主要用于一些矢量图标，可设置大小颜色，Icon 中还内置了一些图标可以直接使用；
• CloseButton、BackButton 带关闭图标、返回图标的按钮，相当于 Android 中的 Button；
• Chip，相当于对常用控件进行了封装；
• Divider，分割线，可以设置颜色和边距；
• Card，相当于 Android 中的CardView，可以设置背景、阴影、外边距；
• AlertDialog，对话框组件。

StatefulWidget相关组件

StatefulWidget 是可变状态的widget。使用setState()方法管理StatefulWidget的状态的改变。调用setState()通知Flutter框架，某个状态发生了变化，Flutter会重新运行build()方法，进行页面的重新绘制。

MaterialApp、Scaffold、AppBar、BottomNavigationBar、RefreshIndicator、Image、TextField、PageView 都是StatefulWidget的子类。

声明了一个StatefulWidget，需要一个createState()方法。此方法创建管理widget状态的状态对象_MyStatefulWidgetState。

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

总结

当 State 发生改变时，StatefulWidget 会进行页面的渲染和重绘，为了性能的考虑，Flutter SDK 提供了 StatelessWidget。所以可以遵循一个原则，当显示简单不变的内容时，使用 StatelessWidget，当使用 StatelessWidget 无法满足需求时，使用 StatefulWidget。