HarmonyOS5 便捷生活类——如何解决标题栏颜色渐变导致标题栏控件不显示的问题-优快云博客

加入下方官方优快云班级，得鸿蒙礼盒

一起拿鸿蒙礼盒，戳我戳我！！

本期活动时间：2025年8月1日-12月31日

如有问题欢迎私聊我呀！

问题现象

实现标题栏颜色渐变，导致标题栏内部的控件不展示。

参照以下操作，页面上划过程中，标题栏会逐渐透明，导致标题栏组件中头像图片和扫一扫图片也不显示。

问题效果预览：

问题代码示例参考如下：

@Entry
@Component
struct tabTopScroll {
private tabController: TabsController = new TabsController()
@State arr: Array<string> = ['1', '2', '3', '4', '5', '6', '7', '8', '9',]
@State topHeight: number = 0
@State opacityNum: number = 0
scrollSum = 0

build() {
Column() {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Image($r('app.media.home_unlogin'))
.width(40)
.height(40)
.borderRadius(8)
Image($r('app.media.home_top_scan'))
.width(40)
.height(40)
}
.opacity(this.opacityNum)
.position({ x: 0, y: 0 })
.zIndex(99)

// tab内容
Tabs({ barPosition: BarPosition.End, controller: this.tabController }) {
TabContent() {
this.listControllerBuilder()
}.tabBar(this.tabBuilder(0, '手机'))

// ...
}

// ...
}
.width('100%')
.height('100%')
}

@Builder
listControllerBuilder() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text('' + item)
}
}, (item: string) => item)
}
.onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => {
this.scrollSum += scrollOffset
// 监听滚动事件修改透明度
this.opacityNum = 1 - this.scrollSum / 300
})

// ...
}
}

效果预览

背景知识

标题栏渐变是通过页面滚动条偏移量调整标题栏透明度实现渐变的。
页面滚动条偏移量可以通过滚动回调事件onWillScroll获取。
标题栏组件的透明度通过通用属性opacity实现，opacity为0表示完全透明，达到隐藏组件效果，但是在布局中占位。

问题定位

检查组件布局：先定位是否是标题栏组件被其他元素覆盖或者位置偏移导致无法显示。检查组件的父容器、布局属性以及其他相关元素，确保组件能够正常显示。
检查组件样式：确保标题栏组件中的样式属性设置不会影响内部组件的可见性。
检查代码逻辑：检查代码中是否会有属性变化导致标题栏不可见。

分析结论

经过排查发现组件布局正常，未覆盖标题栏组件。但是标题栏组件中的opacity属性会影响到内部组件可见性，页面滚动条的偏移量会影响标题栏组件的透明度，透明度opacity设置为0时导致组件不可见。

修改建议

如果需要修改标题栏透明度且不影响标题栏内容的展示，可以用rgba格式设置背景色，通过调整背景色的透明度来实现标题栏渐变，而不影响标题栏内容的展示。

Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Image($r('app.media.startIcon'))
.width(40)
.height(40)
.borderRadius(8)
Image($r('app.media.startIcon'))
.width(40)
.height(40)
}
.padding(10)
.width('100%')
.height(56)
// 设置背景色并动态修改不透明度
.backgroundColor(`rgba(70,130,180,${this.opacityNum})`)
.position({ x: 0, y: 0 })
.zIndex(99)