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;
  }
相关推荐
孤鸿玉6 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥13 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart