鸿蒙开发自定义渐变导航栏_鸿蒙自定义顶部导航栏(1)，面试加分项没拿到今天要分享的是开发一个自定义渐变导航栏，本项目基于

今天要分享的是开发一个自定义渐变导航栏，本项目基于鸿蒙4.0。

先看效果：

这种导航栏在开发中也比较常见，特点是导航栏背景色从透明到不透明的渐变，以及导航栏标题和按钮颜色的变化。

系统的导航栏无法满足要求，我们需要自定义一个导航栏，我的思路是在导航栏中接收一个来自参数opNav，表示导航栏的透明度，根据这个参数动态设置导航栏的透明度和图片标题的颜色，导航栏代码如下：

@Component export struct navBarView { @Prop opNav:number; @Prop colorNavBar:string; private navHeight:number = 56; navItemClick:(index)=>void

build() { Row() { Stack({ alignContent: Alignment.Start }) { Stack() { Image(this.opNav === 1 ? $r('app.media.back_b') :$ r('app.media.back_w')) .width(24) .height(24) .onClick(() => { this.navItemClick(0) }) } .width(34) .height(34) .opacity(this.opNav === 1 ? 1 : 1 - this.opNav) .margin({ left: 15, right: 15 })

}

Text('Add Expense') .fontSize(15) .fontColor(this.opNav === 1 ? Color.Black : Color.White) .textAlign(TextAlign.Center) .width(120) .height(34) .opacity(this.opNav === 1 ? 1 : 1 - this.opNav)

Stack() { Image(this.opNav === 1 ? $r('app.media.more_b') :$ r('app.media.more_w')) .width(24) .height(24) } .width(34) .height(34) .opacity(this.opNav === 1 ? 1 : 1 - this.opNav) .borderRadius(17) .margin({ left: 15, right: 15 }) } .width('100%') .height(this.navHeight) .backgroundColor(this.colorNavBar) .zIndex(1) .justifyContent(FlexAlign.SpaceBetween) } }

然后在使用导航栏的页面中引入并添加：

import {navBarView} from '../navBarView'

navBarView({ opNav: this.opNav, colorNavBar: this.colorNavBar}

接下来我们需要通过页面滑动的偏移量来计算导航栏的透明度，比如我用的是Scroll：

Scroll(this.scroller) { Column() {

}.width('100%')

}.onScroll((xOffset: number, yOffset: number) => {

this.offsetY = this.scroller.currentOffset().yOffset; if (this.offsetY < 0) { this.scaleValue = (Math.abs(this.offsetY) + 100) / 100; } else { this.scaleValue = 1 } if (this.offsetY >= 56) { this.offsetY = 56 } this.opNav = this.offsetY / 56; this.colorNavBar = rgba(255,255,255,${this.opNav})

}) .edgeEffect(EdgeEffect.Spring) .scrollBar(BarState.Off)

这样一个渐变的导航栏就完成啦。

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）**技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料****