Flutter 4. 手势和资源文件

1.手势

Flutter中提供的手势检测组件为GestureDetector，可以为child组件赋予手势响应。

Flutter中手势可以分为两大类
第一类是触摸事件，有四种类型：

PointerDownEvent:用户与屏幕触摸产生了联系
PointerMoveEvent: 手指从屏幕上一个点移动到了另一个点
PointerUpEvent: 用户停止触摸屏幕
PointerCancelEvent: 此指针的输入不再指向此应用程序

第二类就是我们常见的手势，分为：

单击
缩放
拖动

Flutter中可检测到的手势事件有：

onTapDown: 点击屏幕后触发
onTapUp: 手指离开屏幕触发
onTap: 点击屏幕立即触发
onTapCancel: 此次点击事件结束，onTapDown不会再产生点击事件
onDoubleTap: 双击事件
onLongPress: 长按事件
onVerticalDragStart: 与屏幕解除，手指可能会开始垂直方向移动
onVerticalDragUpdate: 手指在屏幕竖直方向上移动
onVerticalDragEnd: 手指在屏幕竖直方向上移动结束
onHorizontalDragStart:
onHorizontalDragUpdate:
onHorizontalDragEnd:

一个响应用户点击事件的小Demo：

    GestureDetector(
        child: Center(child: Text("哈哈嘻嘻"),),
        onTap: (){
          print("被点击了");
        },
      ),

补充滑动删除组件Dismissible：

Flutter中提供了一个滑动删除组件Dismissible，给child赋予滑动删除功能，用来实现通讯录等列表滑动删除的功能。

Dismissible组件的常用属性：

onDismissed: 当包裹的组件消失后的回调函数
movementDuration: 定义组件消失动画的时长
onResize: 定义组件大小变化时的回调函数
resizeDuration: 组件大小变化时的动画时长
child: 需要包裹的子组件

2.资源文件

2.1 项目中添加资源

Flutter是从 pubspec.yaml 文件中读取资源文件、依赖包等。

如果要把图片资源放在Flutter项目中，用来加载显示，可以把图片资源拖入到项目的某一文件夹，比如新建的ImageSource文件夹，然后在 pubspec.yaml 文件中加入图片的地址：

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
    - ImageSource/a_dot_burr.jpeg  
    - ImageSource/a_dot_ham.jpeg

这样，我们就可以在项目中访问到新增的图片资源了。

2.2 读取资源

读取Flutter项目中添加的资源文件，有如下几种途径：

方式一：使用AssetBundle对象访问资源
每一个Flutter项目，都对应一个rootBundle对象，使用它可以访问主资源包

// 引入依赖包
import 'package:flutter/services.dart' show rootBundle;
// 异步方式读取json文件
Future loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

注意要用异步处理的方式来加载资源

方式二：使用AssetImage类加载图片

如果要显示加入项目的图片，可以使用AssetImage类：

 DecorationImage(image: AssetImage("Images/logo.png")),

如果要访问依赖包中的图片，还需要加上依赖包的名字:

 DecorationImage(image: AssetImage("Images/logo.png", package: "resources"))

2.3 设置启动页面图片

如果要设置Launch Image，
安卓端到 drawable 目录中，打开launch_background.xml文件，自定义drawable来实现自定义启动界面
iOS端到....../ios/Runner，在Assets.xcassets/LaunchImage.imagest中，拖入图片，并命名为LaunchImage.png、LaunchImage@2x.png和LaunchImage@3x.png

2.4 自定义字体

如果要使用自定义的字体，先把字体文件放入到Flutter项目的某一目录中，然后在pubspec.yaml文件中配置字体名字和目录：

   fonts:
     - family: Schyler   // 字体名称  随便写
       fonts:
         - asset: fonts/Schyler-Regular.ttf   // 字体路径  一定不能填错
           style: italic

项目中使用配置好的字体：

Text(
        "afasfasf",
        style: TextStyle(
          fontFamily: "Schyler",
        ),
      ),

最后编辑于：2019.01.30 16:04:36