HarmonyOS 鸿蒙Next 实现渐变标题栏加吸顶分类栏实现

import { window } from ‘@kit.ArkUI’; @Component struct NestedScroll { @State currentYOffset: number = 0; private screenHeight?: number = AppStorage.get(‘screenHeight’) private statusBarHeight?: number = AppStorage.get(‘statusHeight’) private titleBarHeight: number = 40 + (this.statusBarHeight ? this.statusBarHeight : 0) @State tabHeight: string = (this.screenHeight ? (this.screenHeight - this.titleBarHeight) / this.screenHeight : 1) * 100 + ‘%’ private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; private scrollerForScroll: Scroller = new Scroller(); private scrollerForList: Scroller = new Scroller(); controller: TextInputController = new TextInputController() win = window.getLastWindow(getContext()) change(): void { window.getLastWindow(getContext(), (err, data) => { let win: window.Window; if (err.code) { console.error(“error code :” + JSON.stringify(err.code)) return; } try { win = data; //设置窗口为全屏模式 win.setWindowLayoutFullScreen(true); // 设置状态栏 win.setWindowSystemBarProperties({ // 设置状态栏颜色为其他颜色 // statusBarColor: this.setStatusBarColor.toString(), // // 设置状态栏文本颜色为白色 // statusBarContentColor: ‘#ff81f362’ }) console.info(‘带状态栏沉浸式窗口设置完成’) } catch (expextion) { console.error(“error cause :” + JSON.stringify(expextion)) } }) } aboutToAppear(): void { this.change() } build() { Stack({ alignContent: Alignment.Top }) { Scroll(this.scrollerForScroll) { Column() { Column(){}.width(“100%”).height(200).backgroundColor(Color.Pink) Tabs({ barPosition: BarPosition.Start }) { TabContent() { List({ space: 10, scroller: this.scrollerForList }) { ForEach(this.arr, (item: number) => { ListItem() { Text(“促销商品” + item) .width(“100%”) .height(“100%”) .borderRadius(15) .fontSize(24) .textAlign(TextAlign.Center) .backgroundColor(Color.White) }.width(“100%”).height(100) }, (item: string) => item) } .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) .padding({ left: 10, right: 10 }) .width(“100%”) .edgeEffect(EdgeEffect.None) .scrollBar(BarState.Off) }.tabBar(‘促销活动’) TabContent() { List({ space: 10, scroller: this.scrollerForList }) { ForEach(this.arr, (item: number) => { ListItem() { Text(“行程安排” + item) .width(“100%”) .height(“100%”) .borderRadius(15) .fontSize(24) .textAlign(TextAlign.Center) .backgroundColor(Color.White) }.width(“100%”).height(100) }, (item: string) => item) } .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) .padding({ left: 10, right: 10 }) .width(“100%”) .edgeEffect(EdgeEffect.None) .scrollBar(BarState.Off) }.tabBar(‘行程服务’) } .vertical(false) .barMode(BarMode.Fixed) .barWidth(360) .barHeight(56) .width(“100%”) .height(this.tabHeight) .backgroundColor(’#F1F3F5’) } } .scrollBar(BarState.Off) .width(“100%”) .height(“100%”) .onWillScroll((xOffset: number, yOffset: number) => { this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset; }) Row() { TextInput({ text: ‘’, placeholder: ‘input your word…’, controller: this.controller }).fontSize(24) } .justifyContent(FlexAlign.Center) .backgroundColor(Color.Gray) .width(‘100%’) .height(this.titleBarHeight) //渐变色范围150， 需要更改为（粉色图片高度 - titleBar高度 - 状态栏高度） .opacity(this.currentYOffset > 0 ? this.currentYOffset / 150 : 0) .padding({ top: this.statusBarHeight }) } .width(‘100%’) .height(‘100%’) .backgroundColor(0xDCDCDC) }

饭喂到嘴里