前言
Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架，正在被越来越多的开发者和组织使用，包括阿里的咸鱼、腾讯的微信等。
示意图
今天，我将详细讲解组件(widget)所有知识，内容如下：
1. 定义
Flutter里UI控件的统称。
通过组合不同的Widget，可以实现用户界面 & 交互
2. 类型
分为两类：有状态 & 无状态，具体如下：
示意图
3. 生命周期
生命周期从StatefulWidget.createState（）开始，具体如下：
示意图
具体请看：Android Flutter：图文详解 组件Widget的生命周期
4. 具体使用
主要是分为两种类型的使用：
- 无状态组件：StatelessWidget
- 有状态组件：StatefulWidget
4.1 StatelessWidget
// 1. 继承StatelessWidget
class MyWidget extends StatelessWidget {
// 2. 复写build方法
@override
Widget build(BuildContext context) {
// 3. 返回你需要的Widget视图
return _buildMyWidget(context);
}
}
4.2 StatefulWidget
// 1. 继承StatefulWidget
class MyWidget extends StatefulWidget {
// 2. 重写createState()，返回一个State状态
@override
State<StatefulWidget> createState() {
return new _MyWidgetState();
}
}
// 3. 实现State（继承了State，包含了视图和交互逻辑）
class _MyWidgetState extends State<MyWidget>{
// 4. 复写build方法,返回你需要的Widget视图
@override
Widget build(BuildContext context) {
return _buildMyWidget(context);
}
}
总结说明：
// 1. MyWidget：继承了StatefulWidget + 依赖_MyWidgetState返回State
// 2. _MyWidgetState 又继承了 State<MyWidget>，包含了视图和交互逻辑
5. 常用组件
在Flutter里，封装了许多常用Widget。下面我将通过讲解这些Widget来演示StatelessWidget 和 StatefulWidget的具体使用，主要包括：
5.1 基础属性
主要包括：padding、margin、alignment、decoration。具体请看文章：
5.2 基础组件
主要包括：
- 文本类型：Flutter Widget：文本组件Text、RichText、TextField
- 图片类型：Flutter Widget：图片组件Image、Icon、ImageIcon
- 按钮类型：Flutter Widget：按钮组件 - RaisedButton、FlatButton、OutlineButton、IconButton
5.3 基础布局
主要包括：
- Container
- Row
- Column
- Expanded
- center
具体请看文章：Android Flutter：那些不可忽视的基础布局！
5.4 导航栏
主要包括：
- 顶部导航栏：TabBar + TabBarView + TabController
- 底部导航栏：BottomNavigationBar
具体请看文章：
5.5 列表组件
Flutter常用的滚动型列表组件包括：GridView组件 + ListView组件
具体请看文章：
5.6 完整页面
- 主要包括
Material App、Scaffold、AppBar - 具体请看文章：Flutter 完整页面Widget：Material App、Scaffold、AppBar
至此，关于Flutter的组件Widget使用讲解完毕。
6. 总结
- 本文主要讲解了Flutter中Widget所有知识 & 常用组件库；
- 接下来推出的文章，我将继续讲解Flutter的相关知识，包括更多的Widget用法、实例应用等，感兴趣的读者可以继续关注我的博客哦：Carson_Ho的Android博客
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
相关系列文章阅读
Carson带你学Android：学习方法
Carson带你学Android：四大组件
Carson带你学Android：自定义View
Carson带你学Android：异步-多线程
Carson带你学Android：性能优化
Carson带你学Android：动画
欢迎关注Carson_Ho的简书！
不定期分享关于安卓开发的干货，追求短、平、快，但却不缺深度。
网友评论