太多教程繁琐、浪费时间,我们如果只从使用的角度出发,那么flutter的学习曲线可以缩短很多,一、布局,二、事件,三、动画
布局解决能看到什么东西,事件决定能做什么事情,动画让布局和事件拥有更好的体验。搞定这三样,就可以从事基本的开发了
二、事件: 手势事件、路由跳转、网络事件
1、带交互的控件:RaisedButton、IconButton、OutlineButton、Checkbox、SnackBar、Switch
RaisedButton(
child: Text('点击我'),
onPressed: (){
// 点击的内容
}),
2、不自带交互的控件:GestureDetector
GestureDetector({
Key key,
this.child,
this.onTapDown,//按下,每次和屏幕交互都会调用
this.onTapUp,//抬起,停止触摸时调用
this.onTap,//点击,短暂触摸屏幕时调用
this.onTapCancel,//取消 触发了onTapDown,但没有完成onTap
this.onDoubleTap,//双击,短时间内触摸屏幕两次
this.onLongPress,//长按,触摸时间超过500ms触发
this.onLongPressUp,//长按松开
this.onVerticalDragDown,//触摸点开始和屏幕交互,同时竖直拖动按下
this.onVerticalDragStart,//触摸点开始在竖直方向拖动开始
this.onVerticalDragUpdate,//触摸点每次位置改变时,竖直拖动更新
this.onVerticalDragEnd,//竖直拖动结束
this.onVerticalDragCancel,//竖直拖动取消
this.onHorizontalDragDown,//触摸点开始跟屏幕交互,并水平拖动
this.onHorizontalDragStart,//水平拖动开始,触摸点开始在水平方向移动
this.onHorizontalDragUpdate,//水平拖动更新,触摸点更新
this.onHorizontalDragEnd,//水平拖动结束触发
this.onHorizontalDragCancel,//水平拖动取消 onHorizontalDragDown没有成功触发
//onPan可以取代onVerticalDrag或者onHorizontalDrag,三者不能并存
this.onPanDown,//触摸点开始跟屏幕交互时触发
this.onPanStart,//触摸点开始移动时触发
this.onPanUpdate,//屏幕上的触摸点位置每次改变时,都会触发这个回调
this.onPanEnd,//pan操作完成时触发
this.onPanCancel,//pan操作取消
//onScale可以取代onVerticalDrag或者onHorizontalDrag,三者不能并存,不能与onPan并存
this.onScaleStart,//触摸点开始跟屏幕交互时触发,同时会建立一个焦点为1.0
this.onScaleUpdate,//跟屏幕交互时触发,同时会标示一个新的焦点
this.onScaleEnd,//触摸点不再跟屏幕交互,标示这个scale手势完成
this.behavior,
this.excludeFromSemantics = false
})
2.1、onTap:
GestureDetector(
child: Container(
width: 100.0,
height: 100.0,
color:Colors.red,
),
onTapDown: (d){
print("onTapDown");
},
onTapUp: (d){
print("onTapUp");
},
onTap:(){
print("onTap");
},
onTapCancel: (){
print("onTaoCancel");
},
)
2.3、原始指针事件:除了 GestureDetector 能够监听触摸事件外,point是原始的模态事件
PointerDownEvent:指针接触到屏幕的特定位置
PointerMoveEvent:指针从屏幕上的一个位置移动到另一个位置
PointMoveEvent:指针停止接触屏幕
PointUpEvent:指针停止接触屏幕
PointerCancelEvent:指针的输入事件不再针对此应用
3、路由跳转
3.1、点击跳转:Navigator.of(context).pushNamed('/xxxx');
3.2、关闭页面:Navigator.pop(context)
3.3、初始化路由:
// 初始化路由
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/':(context){
return NewWidget();
},
'/main':(context){
return new newRoute();
}
};
}
class NewWidget extends StatefulWidget{
@override
State createState(){
return new MainWidget();
}
}
class MainWidget extends State< NewWidget > {
}
4、网络事件
flutter中常见的网络请求有三种分别是
1,Dart 原生的网络请求 HttpClient、
2,第三方网络请求 http
3,以及 Flutter 中的 Dio。
未完待续