Flutter教程——Widget

一，引用Flutter中文网的定义：

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

在flutter中，一切皆为Widget，即使是布局方式、动画、手势处理（GestureDetector）也都是widget，每个widget都有颜色、大小、背景、边距、点击回调等属性，使用不同的widget就可以开发复杂界面。

二，widget两大类

1，StatelessWidget静态：是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的。这个只要实现build方法就可以了。比如要显示一串文字，这段文字不需要改变，就用StatelessWidget。这个生命周期只有一个，就是build。

build用来创建Widget，每次界面刷新时都会调用，所以build内最好不要写业务逻辑，可以在StateWidget的构造函数中写。

class TestStatelessWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Text('text');
  }
}

2，StatefulWidget动态：持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:

（1）一个 StatefulWidget类。（2）一个 State类，在State类中实现build方法。通过setState()方法渲染UI界面。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在。

三，StatefulWidget生命周期

1，createState：当要创建新的StatefulWidget的时候，会立即执行，且只执行一次。该方法是必须要实现的。

2，initState：widget创建完成后执行的第一个方法，并只执行一次，这时view并没有渲染，但是StatefulWidget已经被加载到渲染树中，mount值变为true，可以做初始化工作，类似于onCreate；

3，didChangeDependencies：第一次创建时会在initState之后调用，以后只要当State对象依赖的InheritedWidget发生变化时会被调用，刷新时并不会调用；

4，build:第一次创建时会在didChangeDependencies后调用，当UI重新渲染时也会调用;

5，addPostFrameCallback：渲染结束的回调，只会被调用一次，之后刷新UI时也不会被调用。

import 'package:flutter/scheduler.dart';
@override
void initState() {
  super.initState();
  SchedulerBinding.instance.addPostFrameCallback((_) => {});
}

6，reassemble:只有热加载时会被调用，在Release模式下永远不会被调用；

7，didUpdateWidget：当树rebuild的时候会被调用；

8，deactivate：当State对象从树中被移除时调用；

9，dispose：当state对象从树中被永久移除时调用，这时mount值变为false，可以在回调中释放资源。

图片来源https://www.jianshu.com/p/f39cf2f7ad78

App的生命周期：resumed、inactive、paused、suspending

创建一个widget到显示：createState->initState->didChangeDependencies->build->addPostFrameCallback；

退出页面：deactivate->dispose;

点击热加载：reassemble->didUpdateWidget->build;

由显示切换到后台：AppLifecycleState .inactive->AppLifecycleState .paused;

后台回到前台：AppLifecycleState .inactive->AppLifecycleState .resumed.

四，一些常见的widget

1，MaterialAPP：可以看做是根widget,可设置title、home、routes、theme、color等；

2，Container：容器widget；

3，Row：水平方向布局的widget列表；

4，Column：垂直方向布局的widget列表；

5，ScaffoId：Material Design 布局结构，常用来做MaterialAPP的子Widget，可自动填充可用空间，可设置appBar、body、drawer、backgroundColor、bottomNavigation(底部导航栏)、floatingActionButton（悬浮按钮）等；

6，Appbar：应用栏,，可设置title、leading（一般显示logo）、actions；

7，BottomNavigationBar：底部导航栏，一般3到5个页面，可以设置items(必须设置)、currentIndex（默认0）、backgroundColor、unselectedItemColor、iconSize等；

8，Image：图像widget；

9，Text：文本widget；

10，Icon：图标；

11，RaisedButton：凸起按钮，onPressed回调点击函数；

12，FlutterLogo:Flutter图标.