前言
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的简书!
不定期分享关于安卓开发的干货,追求短、平、快,但却不缺深度。