窗口部件
- StatefulWidget : 具有可变状态的窗口部件,也就是你在使用应用的时候就可以随时变化,比如我们常见的进度条,随着进度不断变化。
- StatelessWidget: 不可变状态窗口部件,也就是你在使用时不可以改变,比如固定的文字。
常用组件
Text :文本控件
- textAlign: (TextAlign)对齐方式
- maxLines: 设置显示行数
- overflow:设置文本溢出
- style: (TextStyle)设置样式内容
Container: 容器控件,类似
- alignment:(Alignment) 子控件对齐方式
- height\width\color(Colors): 高\宽\颜色
- padding:内边距。
赋值:1. const EdgeInsets.all(10) 2. EdgeInsets.fromLTRB(10,10,20,30) - margin: 外边距。值如padding一样。
- decoration:(BoxDecoration 等)修饰器,设置背景和边框.
与color属性不能共存,只能设置保留一个。
Image:图片控件
加载方式:
- Image.asset: 项目资源图片
- Image.network: 网络资源图片
- Image.file: 加载本地文件图片
- Image.memory: 加载Uint8List资源图片
属性
- repeat :(ImageRepeat)图片重复
- fit:(BixFit)可以控制图片的拉伸和挤压
ListView: 列表控件
- scrollDirection:(Axis)滚动方向
- 动态列表:ListView.builder生成数据列表
GridView:网格控件
- padding:表示内边距
- crossAxisSpacing:网格间的空当,相当于每个网格之间的间距。
- crossAxisCount:网格的列数,相当于一行放置的网格数量
- childAspectRatio:宽高比,这个值的意思是宽是高的多少倍
布局
单行布局:
Column: 垂直布局控件
Row:水平布局控件
Expanded:灵活布局,类似flex:1
- crossAxisAlignment:(CrossAxisAlignment)子控件对齐方式:
main轴:如果你用column组件,那垂直就是主轴,如果你用Row组件,那水平就是主轴。 - cross轴:cross轴我们称为幅轴,是和主轴垂直的方向。比如Row组件,那垂直就是幅轴,Column组件的幅轴就是水平方向的。
Card: 卡片控件
绝对定位,类似absolute
Stack:层叠布局,相对于它第一个控件定位
- alignment:定位位置,x\y轴,值0到1.
赋值:const FractionalOffset(0.5, 0.8) - Positioned组件
页面导航
- SnackBar:显示提示信息的一个控件。
示例:
Scaffold.of(context).showSnackBar(SnackBar(content:Text('7777')));
2.Navigator.push:是跳转到下一个页面,它要接受两个参数一个是上下文context,另一个是要跳转的函数。
实例:
Navigator.push(context,new MaterialPageRoute(
builder:(context) =>new SecondScreen())
);
- Navigator.pop:是返回到上一个页面,使用时传递一个context(上下文)参数,使用时要注意的是,你必须是有上级页面的,也就是说上级页面使用了Navigator.push
- 路由传参:通过构造函数赋值
- 页面跳转并回数据:通过async、await实现。
示例:
_navigateToXiaoJieJie(BuildContext context) async{ //async是启用异步方法
final result = await Navigator.push(//等待
context,
MaterialPageRoute(builder: (context)=> XiaoJieJie())
);
Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
}
}
返回页面,数据传参:
Navigator.pop(context,'大长腿:1511008888');
- 自定义路由:继承PageRouteBuilder,重写(可实现路由跳转效果)
生命周期
StatelessWidget:
- createElement() => build():
- build: 每次界面刷新都会调用
StatefulWidget:
① 初始化期 : createState(创建新Widget,只执行一次) , initState(已经加载到渲染树,只执行一次) ;
② 更新期 : didChangeDependencies( StatefulWidget 依赖的 InheritedWidget 发生变化之后,didChangeDependencies 才会调用,所以 didChangeDependencies 有可能会被调用多次。) , build(每当 UI 需要重新渲染的时候,build 都会被调用,所以 build 会被多次调用,然后 返回要渲染的 Widget。千万不要在 build 里做除了创建 Widget 之外的操作,因为这个会影响 UI 的渲染效率。) ,( addPostFrameCallback :渲染结束的回调,只会被调用一次,之后 StatefulWidget 需要刷新 UI 也不会被调用,addPostFrameCallback 的使用方法是在 initState 里), didUpdateWidget(使用 key 对 Widget 进行复用的时候才会调用) ;
③ 销毁期 : deactivate(State 对象从渲染树中移除) , dispose (View 不需要再显示,从渲染树中移除,可以在 dispose 里做一些取消监听、动画的操作);
APP生命周期:with WidgetsBindingObserver ,监听。
didChangeAppLifecycleState:(
resumed:应用可见并可响应用户操作,app进入前台
inactive:用户可见,但不可响应用户操作,比如来了个电话,前后台切换的过渡状态
paused:已经暂停了,用户不可见、不可操作,app进入后台
suspending:应用被挂起,此状态IOS永远不会回调)
其他
- BackdropFilter: 滤镜
- late: 关键字,显式声明一个非空的变量,但不初始化
- SingleTickerProviderStateMixin: 主要是我们初始化TabController时,
需要用到vsync:
AutomaticKeepAliveClientMixin:保持状态的关键
(相当于缓存当前控件的状态),然后重写wantKeppAlive 的值为true - showSearch:继承并重写SearchDelegate,实现搜索页面
- GestureDetector:手势操作,可以监听点击事件
- Wrap:流式布局,类似flex
- ExpansionTile: 闭合控件单个
- ExpansionPanelList :闭合控件列表
- SingleChildScrollView: 可滚动控件
- ClipPath:裁切图片、容器,继承重写CustomClipper
- AnimationController: 控制动画Animation
- Cupertino: ios 系统控件
- Draggable:控件负责就是拖拽,父层使用了Draggable,它的子元素就是可以拖动的
- DragTarget:用来接收拖拽事件的控件