hadss_uni_input #

介绍 #

Flutter框架的多设备适配交互归一库核心代码。

目录结构 #

├─hadss_uni_input // 项目名称
│  ├─src
│  │  ├─gesture_event.dart // 回调方法参数
│  │  ├─gesture_utils.dart // 公用方法及配置
│  │  ├─keyboard_detector.dart // 键盘事件
│  │  ├─pointer_options.dart // 接口参数
│  │  ├─touch_finger.dart // 触压类
│  │  └─unified_gesture_detector.dart // 事件归一类
│  ├─hadss_uni_input.dart // 接口文件

新增特性 #

1. 新增轻扫交互归一功能，相关接口onSwipe。
2. 新增滚动/平移交互归一功能，相关接口onPanStart，onPanUpdate，onPanEnd，onPanCancel。
3. 新增缩放交互归一功能，相关接口onPinchStart，onPinchUpdate，onPinchEnd,onPinchCancel。
4. 新增旋转交互归一功能，相关接口this.onRotateStart，onRotateUpdate，onRotateEnd，onRotateCancel。
5. 新增上下文菜单交互归一功能，相关接口onContentMenu。
6. 注意：本组件所有手势，键盘不允许同时按下两个键。
7. 新增点击功能，与flutter点击功能用法一致，相关接口 onTap，onTapDown，onTapUp，onTapCancel。
8. 新增双击功能，与flutter双击功能用法一致，相关接口 onDoubleTap，onDoubleTapDown，onDoubleTapCancel。
9. 新增长按功能，与flutter长按功能用法一致，相关接口 onLongPress，onLongPressStart，onLongPressDown，onLongPressMoveUpdate，onLongPressUp，onLongPressEnd，onLongPressCancel。
10. 新增拖拽功能，与flutter拖拽功能用法一致，相关接口 onDragDown，onDragStart，onDragUpdate，onDragEnd，onDragCancel。
11. 新增悬浮功能，相关接口onHover。
12. 请确保电脑中只有一个flutter sdk，否则通过flutter运行鸿蒙真机会出现启动崩溃。
13. 如果要在鸿蒙平板和2in1设备运行，请在ohos-entry-src-main-module.json5中添加。

部署步骤 #

1. 下载源码。
2. 打开命令行，进入 项目根目录\packages\uni_input\example目录
3. 执行命令创建Flutter项目 flutter create .
4. 配置鸿蒙开发环境
5. 执行命令 flutter build hap --release

交互归一能力 #

以下为事件接口 #

说明： 触控板双指捏合生效条件：

1. OpenHarmony SDK: >= API 15
2. flutter sdk 版本要求：oh-3.27.4-dev

以下为pointerOptions参数 #

插件参数信息 #

以下为pointerOptions参数 #

使用说明 #

1. import引用交互hadss_uni_input

import 'package:hadss_uni_input/hadss_uni_input.dart';

2. 滚动平移事件监听实例

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('滚动平移'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: UnifiedGestureDetector(
        pointerOptions: PointerOptions(
            enablePan: true,
            panDirection: panDirection),
        onPanStart: onPanStart,
        onPanUpdate: onPanUpdate,
        onPanEnd: onPanEnd,
        child: Material(
          child: Center(
            child: Transform(
              alignment: Alignment.center,
              transform: Matrix4.identity()
                ..translate(_offset.dx, _offset.dy)
                ..rotateZ(_rotation)
                ..scale(_scale),
              child: Container(
                width: 200,
                height: 200,
                color: Colors.green,
                alignment: Alignment.center,
                child: const Text(
                  '滚动平移',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

3. 轻扫事件监听实例

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轻扫'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: UnifiedGestureDetector(
        pointerOptions: PointerOptions(
          speed: 150,
          direction: SwipeDirection.All,
          enableSwipe: true,
        ),
        onSwipe: onSwipe,
        child: Material(
          child: Center(
            child: Transform(
              alignment: Alignment.center,
              transform: Matrix4.identity()
                ..translate(_offset.dx, _offset.dy)
                ..rotateZ(_rotation)
                ..scale(_scale),
              child: Container(
                width: 200,
                height: 200,
                color: Colors.green,
                alignment: Alignment.center,
                child: const Text(
                  '轻扫',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

4. 缩放事件监听实例

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('缩放'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: UnifiedGestureDetector(
        pointerOptions: PointerOptions(
            enablePinch: true,),
        onPinchStart: onPinchStart,
        onPinchUpdate: onPinchUpdate,
        onPinchEnd: onPinchEnd,
        child: Material(
          child: Center(
            child: Transform(
              alignment: Alignment.center,
              transform: Matrix4.identity()
                ..translate(_offset.dx, _offset.dy)
                ..rotateZ(_rotation)
                ..scale(_scale),
              child: Container(
                width: 200,
                height: 200,
                color: Colors.green,
                alignment: Alignment.center,
                child: const Text(
                  '缩放',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

5. 旋转事件监听实例

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('旋转'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: UnifiedGestureDetector(
        pointerOptions: PointerOptions(
            enableRotate: true,),
        onRotateStart: onRotateStart,
        onRotateUpdate: onRotateUpdate,
        onRotateEnd: onRotateEnd,
        child: Material(
          child: Center(
            child: Transform(
              alignment: Alignment.center,
              transform: Matrix4.identity()
                ..translate(_offset.dx, _offset.dy)
                ..rotateZ(_rotation)
                ..scale(_scale),
              child: Container(
                width: 200,
                height: 200,
                color: Colors.green,
                alignment: Alignment.center,
                child: const Text(
                  '旋转',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

6. 拖拽事件监听实例

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('拖拽'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Transform(
        alignment: Alignment.center,
        transform: Matrix4.identity()..translate(_offset.dx, _offset.dy),
        child: Center(
          child: UnifiedGestureDetector(
            onDragStart: onDragStart,
            onDragUpdate: onDragUpdate,
            onDragCancel: onDragCancel,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text(
                '拖拽',
                style: TextStyle(fontSize: 30),
              ),
            ),
          ),
        ),
      ),
    );
  }

  void onDragStart(DragStartDetails detail) {
    setState(() {
      _offset = detail.localPosition;
    });
  }

  void onDragUpdate(DragUpdateDetails detail) {
    setState(() {
      _offset = detail.localPosition;
    });
  }

  void onDragCancel() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return const AlertDialog(
            title: Text('拖拽取消'),
          );
        });
  }

7. 悬浮事件监听实例

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('悬浮'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Center(
        child: UnifiedGestureDetector(
          onHover: onHover,
          child: Container(
            width: 200,
            height: 200,
            color: color,
            alignment: Alignment.center,
            child: Text(
              text,
              style: const TextStyle(fontSize: 30),
            ),
          ),
        ),
      ),
    );
  }

  void onHover(bool isHover, PointerEvent event) {
    if (isHover) {
      setState(() {
        text = '悬浮中';
        color = Colors.red;
      });
    } else {
      setState(() {
        text = '悬浮取消';
        color = Colors.green;
      });
    }
  }

约束与限制 #

1. OpenHarmony SDK: >= API 12.
2. flutter sdk 版本要求：>= 3.7.12

使用过程中发现任何问题都可以提 Issue。
同时，也非常欢迎您提交 PR。

开源协议 #

本项目基于Apache License 2.0 ，请自由地享受和参与开源。