实战15-状态栏颜色

最新推荐文章于 2024-10-18 15:06:51 发布

追风小老头折腾程序

最新推荐文章于 2024-10-18 15:06:51 发布

阅读量457

点赞数 7

分类专栏： HarmonyOS-租房实战项目文章标签： harmonyos

本文链接：https://blog.csdn.net/weixin_43980468/article/details/142337838

版权

HarmonyOS-租房实战项目专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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)
  //单位是px
  const 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.defaultBuilder
  scrollY: number = 0;
  @State bgColor: string = 'rgba(255, 255, 255, 0)'
  @State fontColor: string = 'rgb(255, 255, 255)'

  @Builder
  defaultBuilder() {
  }

  windowClass?: window.Window

  aboutToAppear() {
    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)
  }
}

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