HarmonyOS鸿蒙Next中如何设置组件不避让软键盘？

HarmonyOS鸿蒙Next中如何设置组件不避让软键盘？ 看文档说给对应组件设置expandSafeArea([SafeAreaType.KEYBOARD])，系统会将软键盘区域视作安全区，从而不会避让软键盘。

代码如下，我想实现拉起键盘的时候，Scroll区域不要遮挡顶部标题，但是没有效果～

请问这种情况有解决办法嘛？

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column() {
        Text('标题').width('100%').height(70).textAlign(TextAlign.Center).backgroundColor('#FF5500')
      }.expandSafeArea([SafeAreaType.KEYBOARD])

      Scroll() {
        Column() {
          Text('占位').width('100%').height(500).textAlign(TextAlign.Center).backgroundColor('#C0C0C0')
          TextInput().width(200)
          Text('占位').width('100%').height(900).textAlign(TextAlign.Center).backgroundColor('#C0C0C0')
        }.width('100%')
      }
      .width('100%')
      .layoutWeight(1)
      .scrollable(ScrollDirection.Vertical)
      .align(Alignment.Top)
      .backgroundColor('#F5F3F9')
    }
  }
}

更多关于HarmonyOS鸿蒙Next中如何设置组件不避让软键盘？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

除了.expandSafeArea([SafeAreaType.KEYBOARD])还要设置zIndex属性，让组件的层级更高一些！

更多关于HarmonyOS鸿蒙Next中如何设置组件不避让软键盘？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


方案：

让标题和滚动区域处于平级关系：

Column() {

  // 标题区域（独立层级）

  Text('标题')

    .width('100%').height(70)

    .expandSafeArea([SafeAreaType.KEYBOARD])

    .zIndex(1)  // 设置层级高于滚动区域

  // 滚动内容区域

  Scroll() {

    Column() { /* 内容省略 */ }

  }

  .layoutWeight(1)

}

设置滚动容器扩展安全区域（楼主如果存在多层滚动容器要逐层设置）：

Scroll()

  .expandSafeArea([SafeAreaType.KEYBOARD])

好的好的，感谢，

背景知识：

楼主需要键盘弹出式“标题”不会被定出去。可以调整键盘的模式，也可以使用布局固定+SafeAreaType.KEYBOARD 方法处理

问题解决：

代码如下：

import { KeyboardAvoidMode } from '@kit.ArkUI';
@Entry
@Component
struct KeyboardPage {
    @State message: string = 'Hello World';

    aboutToAppear(): void {
      //方法一
        this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE_WITH_CARET)
    }

    build() {
        Column() {
            Column() {
                Text('标题')
                    .width('100%')
                    .height(70)
                    .textAlign(TextAlign.Center)
                    .backgroundColor('#FF5500')
            }
            //方法二
            //.expandSafeArea([SafeAreaType.KEYBOARD])
            //.zIndex(2)

            Scroll() {
                Column() {
                    Text('占位')
                        .width('100%')
                        .height(500)
                        .textAlign(TextAlign.Center)
                        .backgroundColor('#C0C0C0')
                    TextInput().width(200)
                    Text('占位')
                        .width('100%')
                        .height(900)
                        .textAlign(TextAlign.Center)
                        .backgroundColor('#C0C0C0')
                }.width('100%')
            }
            .width('100%')
            .layoutWeight(1)
            .scrollable(ScrollDirection.Vertical)
            .align(Alignment.Top)
            .backgroundColor('#F5F3F9')
        }
    }
}

真机调试：

方法一：

cke_24056.gif

方法二：

cke_25202.gif

好的好的，感谢～，

在HarmonyOS鸿蒙Next中，可通过在组件的layoutConfig属性中设置avoidKeyboard属性为false来阻止组件避让软键盘。例如，在ArkUI中使用以下代码：

.layoutConfig({
  avoidKeyboard: false
})

此配置将禁止组件在软键盘弹出时自动调整位置。

在您的代码中，expandSafeArea([SafeAreaType.KEYBOARD]) 被应用在包含标题的 Column 组件上，这会导致该组件将软键盘区域视为安全区，从而不会避让键盘。但您的需求是希望 Scroll 区域不遮挡顶部标题，同时键盘弹出时 Scroll 区域能够正常滚动而不被键盘覆盖。

问题可能在于 expandSafeArea 的设置位置。建议将 expandSafeArea([SafeAreaType.KEYBOARD]) 应用到 Scroll 组件上，而不是标题区域。这样 Scroll 会忽略键盘的安全区域，保持可滚动内容不被键盘遮挡，同时标题区域保持固定。

修改后的代码片段如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column() {
        Text('标题').width('100%').height(70).textAlign(TextAlign.Center).backgroundColor('#FF5500')
      }

      Scroll() {
        Column() {
          Text('占位').width('100%').height(500).textAlign(TextAlign.Center).backgroundColor('#C0C0C0')
          TextInput().width(200)
          Text('占位').width('100%').height(900).textAlign(TextAlign.Center).backgroundColor('#C0C0C0')
        }.width('100%')
      }
      .expandSafeArea([SafeAreaType.KEYBOARD])  // 将 expandSafeArea 移至 Scroll 组件
      .width('100%')
      .layoutWeight(1)
      .scrollable(ScrollDirection.Vertical)
      .align(Alignment.Top)
      .backgroundColor('#F5F3F9')
    }
  }
}

这样设置后，Scroll 区域将不会避让软键盘，内容可以正常滚动，同时标题区域保持固定且不被遮挡。

回到顶部