---

前言

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。具体请看文章：

• Android Flutter：那些常用的边距属性padding、margin、alignment
• Android Flutter：UI中你必须了解的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

具体请看文章：

• Flutter 顶部导航栏实现：TabBar + TabBarView + TabController

• Android Flutter BottomNavigationBar：该如何优雅实现底部导航栏？

5.5 列表组件

Flutter常用的滚动型列表组件包括：GridView组件 + ListView组件

具体请看文章：

• Flutter：手把手教你使用滚动型列表组件：ListView

• Flutter：手把手教你使用滚动型列表组件GirdView

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的简书！

不定期分享关于安卓开发的干货，追求短、平、快，但却不缺深度。