一,引用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图标.