三天快速学习flutter（二）之事件

太多教程繁琐、浪费时间，我们如果只从使用的角度出发，那么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<StatefulWidget> createState(){
    return new MainWidget();
  }
}

class MainWidget extends State< NewWidget > {
}

4、网络事件

flutter中常见的网络请求有三种分别是

1，Dart 原生的网络请求 HttpClient、

2，第三方网络请求 http

3，以及 Flutter 中的 Dio。

5、多线程：默认是单线程，任务默认在主线程中处理。
事件队列，在Dart的线程中也存在事件循环和消息队列的概念，但在Dart中线程叫做isolate。

未完待续

三天快速学习flutter（二）之事件

猜你喜欢