【HarmonyOS NEXT】如何实现页面滑动过程中动态修改状态栏文字颜色

 【关键字】

状态栏 / 字体颜色 / 动态修改

【问题描述】

刚进入页面时状态栏中的时间、电量、wifi等文字的颜色为白色，随着页面向上滚动，状态栏内容颜色需要变为黑色，是否有方法支持状态栏颜色的修改。

【解决方案】

可以使用import window from '@ohos.window'; 中的SystemBarProperties属性修改状态栏的颜色，根据自己业务属性监听对应的滑动时间，然后做出对应的颜色修改。

Demo如下：

import measure from '@ohos.measure'
import window from '@ohos.window';
@Entry
@Component
struct MeasureDemo {
@State message: string = 'Hello World';
private scrollerForList: Scroller = new Scroller()
private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
@State measure: SizeOptions = measure.measureTextSize({
textContent: this.message,
})
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text('测试文本宽度:' + this.measure.width)
Text('测试文本高度:' + this.measure.height)
Button("onclick").onClick(() => {
window.getLastWindow(getContext(this), (err, win) => {
win.setWindowSystemBarProperties({statusBarContentColor : '#ff00ff'})
})
})
List({ space: 20, scroller: this.scrollerForList }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("ListItem" + item)
.width("100%")
.height("100%")
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(Color.White)
}.width("100%").height(100)
}, (item: string) => item)
}
.width("100%")
.height("50%")
.edgeEffect(EdgeEffect.None)
.friction(0.6)
.onScroll(() => {
window.getLastWindow(getContext(this), (err, win) => {
win.setWindowSystemBarProperties({statusBarContentColor : '#ff00ff'})
})
})
}
.width('100%')
}
.height('100%')
.backgroundColor(Color.Pink)
}
}