实现安全区域,关于图片的安全区域设置

关于图片的安全区域设置,在我们日常生活中,经常会对某些看到的图片进行评论,在评论点击文本框时会将图片顶起,有时我们希望图片不进行移动,这时可以使用安全区域。


HarmonyOS
2024-05-22 22:57:24
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
juliedan

这个demo主要用来实现在拉起键盘时不会造成图片上移。

1. 先设置一个全屏的column并设置安全区域(键盘、系统)。

2. 放置一张图片并设置为安全区域。

3. 最后设置文本框但不设置安全区域,这样文本框拉起键盘时就不会造成图片上移。

export struct ImageSafe { 
  @State sqlText: string = ""; 
  controller: TextInputController = new TextInputController(); 
 
  build() { 
    Row() { 
      Stack() { 
        Column() 
          .height('100%') 
          .width('100%') 
          .backgroundImage($r('app.media.OIP')) 
          .backgroundImageSize(ImageSize.Cover)//加入expandSafeArea确保column不会上下滚动 
          .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM, SafeAreaType.CUTOUT]) 
        Image($r('app.media.download')).width(275).height(500) 
          .margin(100)//加入expandSafeArea确保Image不会因拉起键盘而上下滚动 
          .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM]) 
        TextInput({ text: this.sqlText, placeholder: 'input your word', controller: this.controller }) 
          .placeholderFont({ size: 14, weight: 400 }) 
          .width(320) 
          .height(40) 
          .offset({ y: 120 }) 
          .fontSize(14) 
          .fontColor(Color.Black) 
          .backgroundColor(Color.White) 
      }.width('100%').alignSelf(HorizontalAlign.Center) 
 
    }.height('100%') 
  } 
}
分享
微博
QQ
微信
回复
2024-05-23 17:16:37
相关问题
指定页面区域转化为图片
839浏览 • 1回复 待解决
panel组件点击区域问题
3499浏览 • 1回复 待解决
如何屏蔽弹窗外区域事件
1093浏览 • 1回复 待解决
是否有线程安全容器类
838浏览 • 1回复 待解决
安全加密算法代码参考
663浏览 • 1回复 待解决
日志log区域不相关信息太多。
276浏览 • 1回复 待解决
隐私安全页面跳转实践
1273浏览 • 1回复 待解决
可以保障代码安全吗?
6175浏览 • 1回复 已解决
鸿蒙上如何获取挖孔区域高度啊
4788浏览 • 1回复 待解决
Native rdb写入是否有线程安全管理
867浏览 • 1回复 待解决
屏幕作业区域控制视频快进或回退
319浏览 • 1回复 待解决