Flutter之旅：教你使用所有常见Widget

前言

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

目录

我将详细讲解组件(widget)所有知识，目录如下：

1、定义

Flutter里UI控件的统称。

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

2、类型

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

3、生命周期

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

生命周期.png

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);
  }
}

5、常用组件

在flutter中，封装了许多常用的Widget。下面将通过讲解这些Widget来演示StatelessWidget 和 StatefulWidget的具体使用，主要包括：