沉浸式图文排列布局如何实现

沉浸式图文排列布局如何实现

HarmonyOS
2024-08-01 09:27:28
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
richard_li_li

当状态栏元素和底部导航条元素不相同时,不能简单通过窗口背景色或背景图片组件扩展来实现。在这种情况下,需要分别对顶部元素和底部元素进行配置以适应安全区的扩展。具体而言,顶部元素需配置为

expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP]),底部元素需配置为expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.BOTTOM])。
@Entry
@Component
struct Index {
  build() {
    Swiper() {
      Column() {
        Image($r('app.media.start'))
          .height('50%').width('100%')

设置图片延伸到状态栏     

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
        Column() {
第一课')
            .fontSize(32)
            .margin(30)

通过循序渐进的学习路径,无经验和有经验的开发者都可以掌握ArkTS语言声明式开发范式,体验更简洁、更友好的HarmonyOS应用开发旅程。')     

.fontSize(20).margin(20)
        }.height('50%').width('100%')
        .backgroundColor(Color.White)

设置文本内容区背景延伸到导航栏

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
      }
    }
    .width('100%')
    .height('100%')

关闭Swiper组件默认的裁切效果以便子节点可以绘制在Swiper外。

.clip(false)
  }
}
分享
微博
QQ
微信
回复
2024-08-01 18:05:04
相关问题
沉浸登录界面如何实现
307浏览 • 1回复 待解决
如何实现沉浸状态栏?
563浏览 • 1回复 待解决
HarmonyOS 沉浸状态栏实现
51浏览 • 1回复 待解决
HarmonyOS 沉浸方案
266浏览 • 1回复 待解决
如何设置沉浸状态栏
2618浏览 • 1回复 待解决
如何设置沉浸窗口,你会吗?
1955浏览 • 1回复 待解决
如何实现文本竖向排列
2510浏览 • 1回复 待解决
HarmonyOS 沉浸状态栏
137浏览 • 1回复 待解决
HarmonyOS 关于沉浸效果开发
59浏览 • 1回复 待解决
HarmonyOS List组件沉浸问题
18浏览 • 1回复 待解决