三天快速学习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 createState(){
    return new MainWidget();
  }
}

class MainWidget extends State< NewWidget > {
}

        4、网络事件

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

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

2,第三方网络请求 http

3,以及 Flutter 中的 Dio。

未完待续

你可能感兴趣的:(学习)