Android Flutter：手把手教你使用所有常见Widget

Posted 2023-01-02 小陈乱敲代码

---

前言

Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架，正在被越来越多的开发者和组织使用，包括阿里的咸鱼、腾讯的微信等。

示意图

今天，我将详细讲解组件(widget)所有知识，内容如下：

---

1. 定义

Flutter里UI控件的统称。

通过组合不同的Widget，可以实现用户界面 & 交互

---

2. 类型

分为两类：有状态 & 无状态，具体如下：

示意图

---

3. 生命周期

生命周期从StatefulWidget.createState（）开始，具体如下：

---

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使用讲解完毕。

链接：https://www.jianshu.com/p/ef99d468e24b
作者：Carson带你学安卓

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

全套视频资料：

一、面试合集

二、源码解析合集

三、开源框架合集

欢迎大家一键三连支持，若需要文中资料，直接点击文末CSDN官方认证微信卡片免费领取↓↓↓