扣丁书屋

Flutter 入门笔记(Part 5) 依赖管理,手势识别

12 . 依赖管理

  • 可以把资源放任意目录,只需要使用根目录下的pubspec.yaml文件,对这些资源的所在位置进行显示声明就行.

12.1 图片

flutter:
  assets:
    - assets/background.jpg   #挨个指定资源路径
    - assets/loading.gif  #挨个指定资源路径
    - assets/result.json  #挨个指定资源路径
    - assets/icons/    #子目录批量指定
    - assets/ #根目录也是可以批量指定的
  • Flutter遵循了基于像素密度的管理方式,如1.0x,2.0x,3.0x.Flutter会根据当前设备分辨率加载最接近设备像素比例的图片资源
  • 想让Flutter适配不同的分辨率,只需要将其他分辨率的图片放到对应的分辨率子目录中.
目录如下

assets
├── background.jpg    //1.0x图
├── 2.0x
│   └── background.jpg  //2.0x图
└── 3.0x

在pubspec.yaml文件声明:

flutter:
  assets:
    - assets/background.jpg   #1.0x图资源

12.2 字体

fonts:
  - family: RobotoCondensed  #字体名字
    fonts:
      - asset: assets/fonts/RobotoCondensed-Regular.ttf #普通字体
      - asset: assets/fonts/RobotoCondensed-Italic.ttf
        style: italic  #斜体
      - asset: assets/fonts/RobotoCondensed-Bold.ttf
        weight: 700  #粗体

12.3 三方库 三方组件库

  • Dart提供包管理工具: Pub,管理代码和资源
  • 对于包,通常是指定版本区间,而很少直接指定特定版本.
  • 多人协作时,建议将Dart和Flutter的SDK环境写死,统一团队的开发环境.避免因为跨SDK版本出现的API差异而导致工程问题.
dependencies:
  //1. #路径依赖
  package1:
    path: ../package1/
  //2. github
  date_format:
    git:
      url: https://github.com/xxx/package2.git #git依赖
  //3. pub上面的
  date_format: 1.0.6

13 . 手势识别

  • 底层原始指针事件: 用户的触摸数据,如手指接触屏幕 PointerDownEvent、手指在屏幕上移动 PointerMoveEvent、手指抬起 PointerUpEvent,以及触摸取消 PointerCancelEvent.
Listener(
  child: Container(
    color: Colors.red,//背景色红色
    width: 300,
    height: 300,
  ),
  onPointerDown: (event) => print("down $event"),//手势按下回调
  onPointerMove:  (event) => print("move $event"),//手势移动回调
  onPointerUp:  (event) => print("up $event"),//手势抬起回调
);
  • 冒泡分发机制: 将触摸事件交给最内层的组件去响应,事件会从这个最内层的组件开始,沿着组件树向根节点向上冒泡分发.
  • 封装了底层指针事件手势语义的Gesture,平常一般使用GestureDetector.如点击 onTap、双击 onDoubleTap、长按 onLongPress、拖拽 onPanUpdate、缩放 onScaleUpdate 等。

//红色container坐标
double _top = 0.0;
double _left = 0.0;
Stack(//使用Stack组件去叠加视图,便于直接控制视图坐标
  children: <Widget>[
    Positioned(
      top: _top,
      left: _left,
      child: GestureDetector(//手势识别
        child: Container(color: Colors.red,width: 50,height: 50),//红色子视图
        onTap: ()=>print("Tap"),//点击回调
        onDoubleTap: ()=>print("Double Tap"),//双击回调
        onLongPress: ()=>print("Long Press"),//长按回调
        onPanUpdate: (e) {//拖动回调
          setState(() {
            //更新位置
            _left += e.delta.dx;
            _top += e.delta.dy;
          });
        },
      ),
    )
  ],
);
  • 事件处理机制: Flutter会使用手势竞技场来进行各个手势的PK,以保证最后只有一个手势能够响应用户行为.
  • 手势冲突只是手势的语义化识别过程,对于底层指针事件是不会冲突的.
  • 父子都有点击事件的情况 因为子视图在父视图的上面,所以如果点击区域在子视图区域,子视图响应事件.

https://mp.weixin.qq.com/s/9-BL0p6xJmPt2ZH2_KOXhA

最多阅读

如何有效定位Flutter内存问题? 9月以前  |  10184次阅读
Flutter的手势GestureDetector分析详解 2年以前  |  5108次阅读
Flutter插件详解及其发布插件 2年以前  |  4192次阅读
在Flutter中添加资源和图片 2年以前  |  3807次阅读
发布Flutter开发的iOS程序 2年以前  |  3033次阅读
Flutter 状态管理指南之 Provider 2年以前  |  2781次阅读
在Flutter中发起HTTP网络请求 2年以前  |  2685次阅读
Flutter for Web详细介绍 2年以前  |  2639次阅读
使用Inspector检查用户界面 2年以前  |  2606次阅读
Flutter Widget框架概述 2年以前  |  2357次阅读
Flutter框架概览 2年以前  |  2200次阅读
JSON和序列化 2年以前  |  2197次阅读
为Flutter应用程序添加交互 2年以前  |  2175次阅读
Flutter路由详解 2年以前  |  2169次阅读
处理文本输入 2年以前  |  2042次阅读
使用自定义字体 2年以前  |  2033次阅读
编写国际化Flutter App 2年以前  |  1992次阅读
推荐5个Flutter重磅开源项目! 1年以前  |  1987次阅读

手机扫码阅读