键盘出来如何只让指定 UI 进行上移,而不是整体 UI

在某些页面的输入框在底部,顶部还有一些内容需要显示,在键盘出来的时候,我们发现整个页面都被自动上移了。这种情况下就无法看到顶部的内容。我们希望只有底部的输入面板跟随键盘上移。开发过程中,某些命令触发后,屏幕分为三部分,从上到下依次为:提示,图纸内容,输入面板。希望提示和图纸内容不跟随键盘上移。

HarmonyOS
2024-06-03 22:56:24
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
bhtlilly

方案一:可以通过组件的安全区域属性控制。

@Entry 
@Component 
struct SafeAreaExample { 
  @State text: string = '' 
  @State list: number[] = [] 
  controller: TextInputController = new TextInputController() 
 
  aboutToAppear() { 
    for (let index = 0; index < 20; index++) { 
      this.list.push(index) 
    } 
  } 
 
  @Builder 
  TabHeader(text = '') { 
    Text(text).fontSize(30).fontColor(Color.Red).expandSafeArea([SafeAreaType.KEYBOARD]) 
  } 
 
  build() { 
    Flex({ direction: FlexDirection.Column }) { 
      Row() { 
        Text("顶部标题栏内容,我不能被顶出去") 
      } 
      .width('100%') 
      .height(50) 
      .backgroundColor(Color.Pink) 
      .padding({ left: 20, right: 20 }) 
      .zIndex(99) 
      .expandSafeArea([SafeAreaType.KEYBOARD]) // 配置键盘弹出安全区域 
      Tabs() { 
        TabContent() { 
          List({ space: 20 }) { 
            ForEach(this.list, (item: number) => { 
              ListItem() { 
                Row() { 
                  Text('我要正常滚动__测试数据' + item).fontSize(20) 
                } 
              } 
            }, (i: string) => i) 
          }.width('100%').layoutWeight(1) // 设置组件占比权重 
        }.tabBar(this.TabHeader('消息')) 
 
        TabContent() { 
          Column() { 
          }.layoutWeight(1) // 设置组件占比权重 
        }.tabBar(this.TabHeader('云空间')) 
      } 
      .width('100%') 
      .layoutWeight(1) // 设置组件占比权重 
      .backgroundColor("#f1f2f6") 
      .flexGrow(1) 
 
      Row() { 
        TextInput({ text: this.text, placeholder: '底部输入框', controller: this.controller }) 
      } 
      .width('100%') 
      .height(50) 
      .backgroundColor("#dfe4ea") 
      .padding({ left: 20, right: 20 }) 
    }.width("100%") 
  } 
}

方案二:

import window from '@ohos.window'; 
 
@Entry 
@Component 
struct Index { 
  @State screenHeight: number = 0; 
  @State text: string = '' 
  @State list: number[] = [] 
  controller: TextInputController = new TextInputController() 
 
  aboutToAppear() { 
    for (let index = 0; index < 20; index++) { 
      this.list.push(index) 
    } 
    window.getLastWindow(getContext(this)).then(currentWindow => { 
      let property = currentWindow.getWindowProperties(); 
      let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD); 
      // 初始化显示区域高度 
      this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height); 
      // 监视软键盘的弹出和收起 
      currentWindow.on('avoidAreaChange', async data => { 
        if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) { 
          return; 
        } 
        this.screenHeight = px2vp(property.windowRect.height - data.area.bottomRect.height); 
      }) 
    }) 
  } 
 
  @Builder 
  TabHeader(text = '') { 
    Text(text).fontSize(30).fontColor(Color.Red).expandSafeArea([SafeAreaType.KEYBOARD]) 
  } 
 
  build() { 
    Row() { 
      Column() { 
        Row() { 
          TextInput({ text: this.text, placeholder: '顶部搜索框', controller: this.controller }) 
        } 
        .width('100%') 
        .height(50) 
        .backgroundColor(Color.Pink) 
        .padding({ left: 20, right: 20 }) 
 
        Tabs() { 
          TabContent() { 
            List({ space: 20 }) { 
              ForEach(this.list, (item: number) => { 
                ListItem() { 
                  Row() { 
                    Text('我要正常滚动__测试数据' + item).fontSize(20) 
                  } 
                } 
              }, (i: string) => i) 
            }.width('100%') 
          }.tabBar(this.TabHeader('消息')) 
 
          TabContent() { 
            Column() { 
 
            } 
          }.tabBar(this.TabHeader('云空间')) 
        } 
        .width('100%') 
        .backgroundColor("#f1f2f6") 
      } 
      .width('100%') 
    } 
    .width('100%').height(this.screenHeight) 
  } 
}

文档链接:

安全区域

分享
微博
QQ
微信
回复
2024-06-04 22:05:24
相关问题
如何对鸿蒙设备进行ui测试?
1994浏览 • 1回复 待解决
JS UI 怎么判断键盘 是否拉起?
5126浏览 • 1回复 待解决
如何UI描述进行单元测试?
117浏览 • 1回复 待解决
JS UI框架中canvas如何动态指定宽高
5181浏览 • 1回复 待解决
独立的指定帧率来运行UI绘制
360浏览 • 1回复 待解决
JAVA UI 怎么返回一页?
5754浏览 • 2回复 已解决
Ark UI 和Java UI 可以混合开发么?
2714浏览 • 1回复 待解决
鸿蒙UI框架没有 C++的 UI框架
11788浏览 • 2回复 待解决
鸿蒙平台 UI审核如何实现?
3753浏览 • 1回复 待解决
如何UI中获取UIAbilityContext
809浏览 • 1回复 待解决
如何UI中获取Context
792浏览 • 1回复 待解决
鸿蒙os的JS UI如何导入jquery
8082浏览 • 4回复 待解决
callback无法成功更新UI
583浏览 • 1回复 待解决