实战15-状态栏颜色

EntryAbility

async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {// 3.为沉浸式窗口加载对应的目标页面。windowStage.loadContent("pages/Index", (err) => {if (err.code) {console.error('Failed to load the content. Cause:' + JSON.stringify(err));return;}console.info('Succeeded in loading the content.');});//1.设置全屏//应用窗口对象const windowClass = await windowStage.getMainWindow()//设置全屏windowClass.setWindowLayoutFullScreen(true)//获取状态栏高度const avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)//单位是pxconst topHeight = avoidArea.topRect.height;//将状态高度存储起来AppStorage.setOrCreate('topHeight', px2vp(topHeight))//设置状态栏的颜色windowClass.setWindowSystemBarProperties({statusBarContentColor: '#FFFFFF',navigationBarContentColor: '#FFFFFF'})const prop = windowClass.getWindowProperties()hilog.info(0x0000, 'atguigu', JSON.stringify(prop))}

import { IColor } from '../../api/models/HomeData';
import { window } from '@kit.ArkUI';@Component
export default struct ScrollContainer {@StorageProp('topHeight') topHeight: number = 0@BuilderParam contentBuilder: () => void = this.defaultBuilder@BuilderParam navBuilder: ($$: IColor) => void = this.defaultBuilderscrollY: number = 0;@State bgColor: string = 'rgba(255, 255, 255, 0)'@State fontColor: string = 'rgb(255, 255, 255)'@BuilderdefaultBuilder() {}windowClass?: window.WindowaboutToAppear() {this.getWindowClass()} getWindowClass = async () => {this.windowClass = await window.getLastWindow(getContext(this))}// 处理滚动handleScroll = (scrollX: number, scrollY: number) => {// 更新并修正 scrollY 的值this.scrollY += scrollY;if (this.scrollY < 0) {this.scrollY = 0}this.calcColor();}// 计算颜色calcColor = () => {if (this.scrollY < 10) {this.bgColor = 'rgba(255, 255, 255, 0)'this.fontColor = 'rgb(255, 255, 255)'    this.windowClass!.setWindowSystemBarProperties({statusBarContentColor: '#FFFFFF',navigationBarContentColor: '#FFFFFF'})} else if (this.scrollY <= 100) {//渐变中（透明度0->1)const colorOpacity = (this.scrollY - 10) / (100 - 10)this.bgColor = `rgba(255, 255, 255, ${colorOpacity})`this.fontColor = `rgb(0, 0, 0,${colorOpacity})`} else {//渐变全部完成this.bgColor = `rgb(255,255,255)`this.fontColor = `rgb(0,0,0)`this.windowClass!.setWindowSystemBarProperties({statusBarContentColor: '#ff000000',navigationBarContentColor: '#ff000000'})}}build() {Stack() {Scroll() {Column() {// 渲染内容this.contentBuilder()}.align(Alignment.TopStart)}.height('100%').scrollBar(BarState.Off).align(Alignment.TopStart).backgroundColor($r('app.color.bg_gray_second')).padding({ bottom: 10 }).onDidScroll(this.handleScroll)Column() {// 渲染头部导航this.navBuilder({ fontColor: this.fontColor })}.backgroundColor(this.bgColor).padding({ top: this.topHeight })}.height('100%').alignContent(Alignment.TopStart)}
}

 

等写完这些学习笔记我会把代码发出来。