如何实现Selectable Region组件的从右向左选择功能

由于你操作的是容器而非文本，常规Directionality包裹这类RTL方案对自定义可选择组件可能不生效，可通过以下几个方向调整：

1. 调整容器布局的坐标逻辑 #

当前用left定位容器，适配RTL需改为right定位并重新计算坐标：

// 替换原Positioned的left参数，改用right定位
right: MediaQuery.of(context).size.width - scaledLeft - ((e.bbox.x2.toDouble() - e.bbox.x1.toDouble()) / (width / (794.r))),
// 移除原left参数

让容器从右侧开始排列，先对齐RTL的视觉布局基础。

2. 重写自定义SelectableAdapter的选择逻辑 #

MySelectableAdapter作为自定义可选择组件，需修改选择相关方法，强制从右向左的选择判定：

class MySelectableAdapter extends Selectable {
  // ... 原有代码
  
  @override
  List<SelectionPoint> getSelectionEndpoints(SelectionPosition position) {
    // 反转选择端点，适配RTL方向
    final originalPoints = super.getSelectionEndpoints(position);
    return originalPoints.reversed.toList();
  }

  @override
  bool hitTest(Offset position) {
    // 调整点击命中的坐标判断，适配RTL布局
    final adjustedPosition = Offset(
      this.size.width - position.dx,
      position.dy,
    );
    return super.hitTest(adjustedPosition);
  }
}

3. 给SelectableRegion注入RTL专属SelectionRegistrar #

通过自定义注册器，强制反转选择的起始/结束位置：

return SelectionArea(
  selectionRegistrar: MyRTLSelectionRegistrar(),
  child: Stack(
    // ... 原有布局代码
  ),
);

class MyRTLSelectionRegistrar extends SelectionRegistrar {
  final Set<Selectable> _selectables = {};

  @override
  void add(Selectable selectable) => _selectables.add(selectable);

  @override
  void remove(Selectable selectable) => _selectables.remove(selectable);

  @override
  void updateSelection(Selection? selection, SelectionChangedCause? cause) {
    if (selection != null) {
      // 反转选择的base和extent，实现RTL选择逻辑
      final rtlSelection = Selection(
        baseOffset: selection.extentOffset,
        extentOffset: selection.baseOffset,
        affinity: TextAffinity.upstream,
      );
      for (final selectable in _selectables) {
        selectable.updateSelection(rtlSelection, cause);
      }
    } else {
      for (final selectable in _selectables) {
        selectable.updateSelection(null, cause);
      }
    }
  }
}

4. 正确嵌套Directionality层级 #

确保Directionality包裹在SelectionArea外层，配合布局调整生效：

return Directionality(
  textDirection: TextDirection.rtl,
  child: SelectionArea(
    child: Stack(
      // ... 原有布局代码
    ),
  ),
);

内容的提问来源于stack exchange，提问作者7ooda