HarmonyOS鸿蒙Next中键盘避让该怎样进行设置
HarmonyOS鸿蒙Next中键盘避让该怎样进行设置
我的TextInput或者RichEditor组件下面还有其他的视图，目前希望用户点击弹出键盘后输入框下面的视图页显示在键盘之上，请问该怎么进行处理，代码如下
Column() {
Blank().layoutWeight(1)
TextInput()
Text("主题title，在键盘之上").height(150)
}
.height('100%')
.width('100%')
4 回复
可以看以下实现demo
//EntryAbility.ets
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
}
onDestroy(): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
}
onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
windowStage.loadContent('pages/Index', (err) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});
windowStage.getMainWindow((err, data) => {
if (err.code) {
console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
return;
}
let windowClass = data;
//1. 设置监听键盘变化,用来设置inputview 避让输入法
try {
windowClass.on('keyboardHeightChange', (data) => {
console.info('keyboardHeightChange. Data: ' + JSON.stringify(data));
AppStorage.setOrCreate('keyboardHeight', data);
console.info(AppStorage.get('keyboardHeight'))
});
} catch (exception) {
console.error('Failed to enable the listener for keyboard height changes. Cause: ' + JSON.stringify(exception));
}
})
}
onWindowStageDestroy(): void {
// Main window is destroyed, release UI related resources
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
}
onForeground(): void {
// Ability has brought to foreground
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
}
onBackground(): void {
// Ability has back to background
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
}
}
//Index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
private controller: RichEditorController = new RichEditorController();
@StorageLink('keyboardHeight') keyboardHeight: number = 0;
build() {
Column() {
Blank().layoutWeight(1)
Row() {
RichEditor({ controller: this.controller })// 绑定自定义键盘
.customKeyboard(null)
.backgroundColor("#F5F6F8")
.width("100%").onIMEInputComplete((value) => {
})
}.margin({ top: 13, bottom: 0 })
Text("键盘展开后，希望这个Text的视图也在键盘之上怎么办？")
.height(150)
// .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP])
}
.height('100%')
.width('100%')
.padding({bottom: px2vp(this.keyboardHeight)}) //配合expandSafeArea, 实现避让键盘
.expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])
}
}
更多关于HarmonyOS鸿蒙Next中键盘避让该怎样进行设置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
这样吗？
在HarmonyOS鸿蒙Next中，键盘避让功能主要通过AdjustPan和AdjustResize两种模式来实现。AdjustPan模式会在键盘弹出时平移当前界面，使得输入框不被键盘遮挡；AdjustResize模式则会重新调整界面大小，确保输入框在键盘上方可见。
在config.json文件中，可以通过设置windowSoftInputMode属性来配置键盘避让行为。例如：
"abilities": [
{
"name": ".MainAbility",
"windowSoftInputMode": "adjustResize"
}
]
其中，adjustResize表示使用调整界面大小的方式避让键盘。如果需要使用平移模式，可以将adjustResize替换为adjustPan。
此外，开发者还可以通过代码动态调整键盘避让行为，使用WindowManager的setWindowSoftInputMode方法进行设置。例如：
import window from '@ohos.window';
window.getTopWindow().then((win) => {
win.setWindowSoftInputMode(window.WindowSoftInputMode.WINDOW_SOFT_INPUT_ADJUST_PAN);
});
通过以上配置，可以灵活控制鸿蒙Next应用中的键盘避让行为。
