顶部延伸到状态栏,底部元素背景扩展的方式-鸿蒙开发者社区-51CTO.COM

顶部延伸到状态栏,底部元素背景扩展的方式

顶部延伸到状态栏,底部元素背景扩展的方式

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

在采用自定义方式实现页签场景时,为确保底部元素与界面布局的和谐统一,可以通过设置expandSafeArea属性来实现底部元素背景的适当扩展,从而优化用户界面的视觉效果和交互体验。

// xxx.ets
@Entry
@Component
struct VideoCreateComponent {
  build() {
    Column() {
      Row() {
        Text('Top Row').fontSize(40).textAlign(TextAlign.Center).width('100%')
      }
      .backgroundColor('#F08080')
设置顶部绘制延伸到状态栏
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

      Row() {
        Text('ROW2').fontSize(40)
      }.backgroundColor(Color.Orange).padding(20)

      Row() {
        Text('ROW3').fontSize(40)
      }.backgroundColor(Color.Orange).padding(20)

      Row() {
        Text('ROW4').fontSize(40)
      }.backgroundColor(Color.Orange).padding(20)

      Row() {
        Text('ROW5').fontSize(40)
      }.backgroundColor(Color.Orange).padding(20)

      Row() {
        Text('Bottom Row').fontSize(40).textAlign(TextAlign.Center).width('100%')
      }
      .backgroundColor(Color.Orange)
设置底部绘制延伸到导航条
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
    }
    .width('100%').height('100%').alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor(Color.Green)
  }
}
分享
微博
QQ
微信
回复
2024-08-01 18:00:49
相关问题
元服务顶部状态栏怎么设置标题
1771浏览 • 3回复 待解决
应用如何设置隐藏顶部状态栏
2355浏览 • 1回复 待解决
状态栏底部触控高度获取
723浏览 • 2回复 待解决
uiextension为什么不会避让顶部状态栏
714浏览 • 1回复 待解决
Js UI 如何设置状态栏背景是透明
3269浏览 • 1回复 待解决
沉侵式状态栏获取状态栏高度为0
315浏览 • 1回复 待解决
获取状态栏与导航高度
550浏览 • 1回复 待解决
获取状态栏高度方法
1914浏览 • 1回复 待解决