HarmonyOS鸿蒙Next中使用RichEditor如何实现输入过程中自动调整滚动位置，使得光标始终可见

HarmonyOS鸿蒙Next中使用RichEditor如何实现输入过程中自动调整滚动位置，使得光标始终可见 下面是代码

Stack({ alignContent: Alignment.BottomStart }) {
    Column() {
        this.buildTitleBar()
        Divider().strokeWidth('1px').color($r('app.color.divider_color'))
        Scroll(this.scrollController) {
            RichEditor(this.options)
              .onReady(() => {
                this.controller.setTypingStyle({
                  fontColor: this.fontColor,
                  fontSize: this.fontSize
                })
              })
              .width('100%')
              .id('et_rich')
        }
        .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
        .edgeEffect(EdgeEffect.None)
        .friction(0.6)
        .align(Alignment.Top)
        .width('100%')
        .layoutWeight(1)
        .id("et_scroll")
    }
    .width('100%')
    .height('100%')
    this.toolBar()
}
//如何实现软键盘弹出后，整体布局不变
//https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-16-V5

目前已实现键盘弹出来不自动顶起整个布局功能。
核心代码：

```scss
expandSafeArea([SafeAreaType.KEYBOARD])

现在要实现的是：输入框高度自适应的前提下，输入内容的过程中，当光标被键盘遮挡时，光标所在行自动滚动到可见区域（即软键盘的上方）。

现在的问题是：

无法拿到光标所在的位置的坐标。

本想和安卓那样通过LayoutManager#getLineForOffset来获取行号，在通过行号获取行的位置。

结果鸿蒙只有三个方法：

declare interface LayoutManager {
    /**
     * Get the line count.
     *
     * @returns { number } The line count value returned to the caller.
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @crossplatform
     * @atomicservice
     * @since 12
     */
    getLineCount(): number;
    /**
     * Get the glyph position at coordinate.
     *
     * @param { number } x - the positionX of typography.
     * @param { number } y - the positionY of typography.
     * @returns { PositionWithAffinity } TextBlob object.
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @crossplatform
     * @atomicservice
     * @since 12
     */
    getGlyphPositionAtCoordinate(x: number, y: number): PositionWithAffinity;
    /**
     * Get LineMetrics.
     *
     * @param { number } lineNumber - the number of line.
     * @returns { LineMetrics } The line Metrics.
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @crossplatform
     * @atomicservice
     * @since 12
     */
    getLineMetrics(lineNumber: number): LineMetrics;
}

有没有大神能知道怎么解决这个问题？


更多关于HarmonyOS鸿蒙Next中使用RichEditor如何实现输入过程中自动调整滚动位置，使得光标始终可见的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

楼主看参考这篇帖子的回复看是否能解决问题：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0212159026354594185

更多关于HarmonyOS鸿蒙Next中使用RichEditor如何实现输入过程中自动调整滚动位置，使得光标始终可见的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中使用RichEditor实现输入过程中自动调整滚动位置，使得光标始终可见，可以通过监听输入内容的变化并动态调整滚动位置来实现。具体步骤如下：

  1. 在RichEditor组件中，监听输入内容的变化。可以使用onChange事件来捕捉内容的变化。
  2. 在onChange事件回调中，获取当前光标的位置。可以通过getSelection方法获取光标的位置信息。
  3. 根据光标的位置，计算光标相对于RichEditor可视区域的位置。如果光标即将超出可视区域，则调整RichEditor的滚动位置，使光标始终可见。
  4. 使用scrollTo方法调整RichEditor的滚动位置，确保光标在可视区域内。

示例代码片段如下：

richEditor.onChange((event) => {
  const selection = richEditor.getSelection();
  const cursorPosition = selection.getBoundingClientRect();
  const editorRect = richEditor.getBoundingClientRect();

  if (cursorPosition.bottom > editorRect.bottom) {
    richEditor.scrollTo(0, cursorPosition.bottom - editorRect.bottom);
  } else if (cursorPosition.top < editorRect.top) {
    richEditor.scrollTo(0, cursorPosition.top - editorRect.top);
  }
});

在HarmonyOS鸿蒙Next中使用RichEditor实现输入过程中自动调整滚动位置，确保光标始终可见，可以通过以下步骤实现：

  1. 监听输入事件：使用onTextChange或onSelectionChange监听文本变化或光标位置变化。

  2. 获取光标位置：通过getSelectionStart()和getSelectionEnd()获取当前光标的位置。

  3. 计算滚动位置：根据光标位置和RichEditor的可见区域，计算需要滚动的偏移量。

  4. 调整滚动位置：使用scrollTo()或scrollBy()方法，将RichEditor的滚动位置调整到光标可见的区域。

示例代码：

richEditor.setOnTextChangeListener((text, start, before, count) -> {
    int cursorPosition = richEditor.getSelectionStart();
    int scrollY = calculateScrollY(cursorPosition); // 自定义计算滚动位置
    richEditor.scrollTo(0, scrollY);
});

通过以上步骤，可以确保在输入过程中，光标始终在可见区域内。

回到顶部