HarmonyOS 鸿蒙Next 配置页面底部安全区域背景色

HarmonyOS 鸿蒙Next 配置页面底部安全区域背景色

如何改变底部安全区域颜色

2 回复

可以参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5#section15107174585619 pages.json里面有个globalStyle中的backgroundColor可以试试

在manifest.json文件里app-plus下配置

"safearea": {

"bottom": {

"offset": "none"

}

},

可以去掉安全区域

更多关于HarmonyOS 鸿蒙Next 配置页面底部安全区域背景色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

更多关于HarmonyOS 鸿蒙Next 配置页面底部安全区域背景色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，配置页面底部安全区域背景色通常涉及到UI布局和样式定制。以下是如何实现这一配置的基本步骤： 针对底部的页签部分，Navigation组件和Tabs组件默认实现了页签的延伸处理，开发者只需要保证Navigation和Tabs组件的底部边界和底部导航条重合即可。若开发者显式调用expandSafeArea接口，则安全区效果由expandSafeArea参数指定。

如果未使用上述组件而是采用自定义方式实现页签的场景，可以针对底部元素设置expandSafeArea属性实现底部元素的背景扩展。

image.png

// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/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)
 }
}
回到顶部