HarmonyOS鸿蒙Next中如何根据手机避让区来进行对软键盘左上角的那个编码框坐标进行对比？？？

HarmonyOS鸿蒙Next中如何根据手机避让区来进行对软键盘左上角的那个编码框坐标进行对比？？？ 【问题描述】：我们的应用是一块输入法，现在遇到的问题是如何对软键盘左上角的那个编码框坐标进行对比？？编码框太大了影响美观。

【代码复现】：不涉及

cke_2730.png


更多关于HarmonyOS鸿蒙Next中如何根据手机避让区来进行对软键盘左上角的那个编码框坐标进行对比？？？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

开发者您好，请问一下，您所说的编码框太大是指编码框宽度太大了吗？如果是这一种情况，您可通过设置不固定联想词框的宽度，框的宽度就能自动根据文字长度动态展示。

更多关于HarmonyOS鸿蒙Next中如何根据手机避让区来进行对软键盘左上角的那个编码框坐标进行对比？？？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


就是上面图中我红线框的部分太大了，

开发者您好，为了更快的分析定位您的问题，请您再补充以下信息：

1、请参考1楼回复，不固定联想词框的宽度，框的宽度就能自动根据文字长度动态展示，不会出现问题截图中的框中大片空白部分。红线框的部分太大，是指高度太高吗？您方便的话请您再详细描述一下问题场景。

2、请问下您的联想词框是在键盘区域内吗？还是超出了键盘区域绘制的。

是的，感觉这个高度太高了，联想词框是在区域内的，

在HarmonyOS Next中，可通过window.getAvoidArea获取避让区信息，再使用UIAbilityContext的windowStage.getMainWindowSync()获取主窗口。通过window.getWindowProperties().windowRect得到窗口坐标，结合软键盘组件TextInput的position属性计算编码框位置，与避让区坐标进行对比。

在HarmonyOS Next中，可以通过Window和AvoidArea相关API获取避让区信息，并与输入法编码框坐标进行对比调整。

核心步骤如下：

  1. 获取窗口对象与避让区信息： 在UIAbility或UI组件中，通过window.getLastWindow(this.context)获取当前窗口对象，然后调用getWindowAvoidArea(type: AvoidAreaType)方法获取指定类型的避让区矩形。

    import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

// 获取窗口实例
let windowClass: window.Window | null = null;
try {
  windowClass = window.getLastWindow(this.context);
} catch (error) {
  let err: BusinessError = error as BusinessError;
  console.error('Failed to obtain the window. Code: ' + JSON.stringify(err));
}

// 获取系统避让区（通常包含状态栏、导航栏、软键盘区域等）
if (windowClass) {
  let avoidArea: window.AvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
  // avoidArea 包含 leftRect, topRect, rightRect, bottomRect 四个矩形区域
  console.log('System avoid area topRect: ' + JSON.stringify(avoidArea.topRect));
}

  2. 获取编码框的坐标信息： 对于输入法应用的编码框（通常是一个自定义的TextInput或TextArea等组件），你需要获取其在屏幕上的位置和尺寸。可以使用getInspectorByKey或组件实例的getGeometryProperties方法（具体取决于你的UI框架和组件实现方式）来获取其边界矩形。

    // 假设编码框是一个TextInput，并为其设置了id
@Component
struct CodeInputBox {
  private codeInputController: TextInputController = new TextInputController();

  build() {
    TextInput({ placeholder: '编码输入框', controller: this.codeInputController })
      .id('codeInputBox')
      .onClick(() => {
        // 点击时，可以尝试获取其几何属性（示例，具体API可能需调整）
        // 实际开发中可能需要通过UI上下文或自定义方法来精确获取
        // let geometry = this.codeInputController.getGeometryProperties(); 
        // 或者通过查询节点信息
      })
  }
}

    更通用的方法是使用@ohos.arkui.node模块来查询节点信息（API可能随版本更新，请查阅最新文档）：

    import { node } from '@kit.ArkUI';

// 在合适的时机，如组件挂载后或布局变化时
// 1. 获取UIAbility实例的UI上下文（示例）
// 2. 通过选择器或key找到编码框节点
// 3. 调用节点的getGeometryProperties()方法获取其位置和大小
// 伪代码逻辑：
// let uiContext: UIContext = ...; // 获取当前UI上下文
// let nodeId: string = node.getNodeIdByKey(this.context, 'codeInputBox'); // 通过组件id获取节点id
// let geometry: node.GeometryProperties = node.getGeometryProperties(nodeId);
// geometry中包含 { position: { x, y }, size: { width, height } } 等信息，这个位置是相对于窗口的。

  3. 坐标对比与调整：

    • 坐标系：注意AvoidArea返回的矩形坐标是屏幕坐标系（原点在屏幕左上角）。而通过UI节点获取的组件几何属性，其位置（position）通常是相对于其所在窗口的坐标。你需要将组件坐标转换为屏幕坐标才能进行直接对比。
      • 转换公式大致为：组件屏幕坐标X = 窗口位置X + 组件相对窗口位置X。窗口位置可以通过windowClass.getWindowProperties().windowRect获取。
    • 对比逻辑：你需要判断编码框的矩形区域（转换到屏幕坐标后）是否与avoidArea.bottomRect（通常是软键盘避让区）或avoidArea.topRect（状态栏区域）发生重叠。特别是bottomRect，当软键盘弹出时，其height会大于0，表示屏幕底部被占用的区域。
    • 调整策略：如果发生重叠（例如编码框底部与软键盘避让区顶部相交），则需要调整编码框的布局位置或尺寸。常见的做法是：
      • 将编码框向上平移（例如修改其marginBottom或position偏移），确保其底部在avoidArea.bottomRect.top之上。
      • 或者动态减少编码框的高度，使其适应新的可用区域。

关键点总结：

  • 使用window.getWindowAvoidArea获取系统避让区。
  • 使用UI节点查询API（如@ohos.arkui.node中的方法）获取编码框组件的精确几何信息。
  • 统一坐标到屏幕坐标系后进行重叠检测。
  • 根据检测结果，动态调整编码框的布局属性（位置、大小）以避免重叠。

由于HarmonyOS Next的API仍在持续演进，建议在实际开发时查阅最新的@kit.ArkUI和@kit.Window等相关模块的官方API文档，以获取最准确的类和方法定义。

回到顶部