Flutter 图片编辑板(一) 事件路由

一个图片编辑板,有两部分组成。编辑板和内容项。每一个内容项是被InteractiveViewer修饰的widget,具有缩放偏移的功能。

在图片编辑板上, 会有多个内容相,图片或文字(添加文字目前还没做过)。 当要编辑其中一个项目时,必然需要先选中这个项目。这就牵扯到事件问题。是不是点中哪个看到的项目,这个项目就会发出事件?实际情况是不会的。因为InteractiveViewer的大小是覆盖真个编辑板的,虽然看到的内容项小,其实是占用了所有编辑板的。这就导致事件无法传递给你看到并点击的内容项。

这就需要我们重新实现编辑板的事件路由。

  1. 我们在InteractiveViewer再修饰一层GestureDetector。这样就能获取在编辑板上点击的所有事件!

  2. 实时计算每一个内容项的事件区域,或者说在编辑板所占位置大小,也就是一个Rect对象。这里要注意缩放问题。

Dart 复制代码
    if (widget.transformationController != null &&
        widget.mergeItemInfo.eventArea != null) {
      double transX = widget.transformationController!.value
          .getTranslation()
          .x; //the distance in UI review.
      double transY = widget.transformationController!.value.getTranslation().y;
      double scale = widget.transformationController!.value.getMaxScaleOnAxis();

      Rect eventArea = Rect.fromLTWH(
          widget.mergeItemInfo.initEventArea!.left * scale + transX,
          widget.mergeItemInfo.initEventArea!.top * scale + transY,
          widget.mergeItemInfo.initEventArea!.width * scale,
          widget.mergeItemInfo.initEventArea!.height * scale);
      widget.mergeItemInfo.eventArea = eventArea;
    }
  
  1. 根据点击的事件位置,路由的遍历每一个内容项,查看是否命中,命中就返回事件给这个内容项。
Dart 复制代码
  bool isInEventArea(TapDownDetails details) {
    Offset point = details.localPosition;
    if (eventArea != null) {
      return point.dx >= eventArea!.left &&
          point.dx <= eventArea!.left + eventArea!.width &&
          point.dy >= eventArea!.top &&
          point.dy <= eventArea!.top + eventArea!.height;
    }

    return false;
  }
相关推荐
苦逼的搬砖工38 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
黑金IT2 小时前
Dart → `.exe`:Flutter 桌面与纯命令行双轨编译完全指南
flutter
iOS_MingXing2 小时前
flutter TabBar 设置isScrollable 第一个有间距
flutter
小红星闪啊闪21 小时前
Flutter开发 -- 需要了解的Dart知识
flutter
小李A_Z1 天前
[Flutter]介绍些flutter的弹窗
flutter
小李A_Z1 天前
[Flutter]介绍写Flutetr的按钮
flutter
恋猫de小郭1 天前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
tangweiguo030519871 天前
FlutterActivity vs FlutterFragmentActivity:全面对比与最佳实践
android·flutter
ITKEY_1 天前
flutter日期选择国际化支持
开发语言·javascript·flutter
农夫三拳_有点甜1 天前
Flutter SystemChrome 完整指南
flutter