如何制作从右到左方向的可选区域小部件

Question

我正在使用带有可选区域的选择区域，并且需要从右到左进行选择方向（我尝试了所有 RTL 解决方案，例如方向性环绕）。 但我没有使用文本，我使用的是容器，这里是我的代码片段 这是演示： 视频

return SelectionArea(

        child: Stack(
          // clipBehavior: Clip.antiAlias,
          // textDirection: TextDirection.rtl,
          // alignment: Alignment.topRight,
          children: [
            ...state.wordsInPage.map((e) {
              double widthScaleFactor = 794.r / width;
              double heightScaleFactor = 1123.r / hight;
              double scaledLeft = e.bbox.x1 * widthScaleFactor;
              double scaledTop = e.bbox.y1 * heightScaleFactor;
              // double scaledRight = e.words.last.bbox.x2 * widthScaleFactor;
              final double lineHeight =
                  convertToLogicalPixels(context, (e.bbox.y2 - e.bbox.y1));

              return Positioned(
                height: 20.h,
                top: scaledTop,
                left: scaledLeft,
                width: (e.bbox.x2.toDouble() - e.bbox.x1.toDouble()) /
                    (width / (794.r)),
                child: Align(
                  alignment: Alignment.centerRight,
                  child: MySelectableAdapter(
                    id: ",${e.id}",
                    child: Container(
                      color: e.isSelected
                          ? Colors.amber.withOpacity(0.5)
                          : Colors.transparent,
                    ),
                  ),
                ),
              );
            }),

          ],
        ),
      );
    },
  
);

Answer 1

1. 利用 TextDirection 和 TextAlign： 利用 Stack 小部件中的 TextDirection.rtl 来设置子项的整体方向：

飞镖

Stack(
  textDirection: TextDirection.rtl,
  // ... other properties

在每个 Positioned 小部件中，将 TextAlign.right 应用于 MySelectableAdapter 子项：

飞镖

Positioned(
  // ... other properties
  child: Align(
    alignment: Alignment.centerRight,
    child: MySelectableAdapter(
      // ... other properties
      child: Container(
        // ... other properties
        alignment: TextAlign.right, // Set text alignment here
      ),
    ),
  ),
);

2. 调整缩放左计算：

由于选择方向是从右到左，因此需要根据最右边的x坐标计算起点（scaledLeft）：

飞镖

double scaledLeft = width - (e.bbox.x2 * widthScaleFactor);

此方法调整每个定位小部件内的堆叠顺序和文本对齐方式。

TextDirection.rtl

设置整体方向，

TextAlign.right

确保文本和其他内容在容器内向右对齐。最后，调整scaledLeft确保选择基于最右边的x坐标从右侧开始。