鸿蒙 Next 简易版本通用头部导航栏开发
在日常页面开发中，我们每个页面都会有一个头部用于展示返回按钮和显示页面信息。如果没个页面都重复写太过于繁琐以及标准不好统一。因此，我们需要一个通用的头部组件。
步骤一
新建一个 ArkTs File 页面，使用 @Component 装饰器创建一个名为 NavBar 的自定义组件
// 自定义工具库import Utils from "../../../common/utils/Utils";
@Component // 通用头部export struct NavBar { build() { }}
复制代码
步骤二
父组件想要能够使用我们的 NavBar 组件，组件内部就需要使用**@Prop**接收父组件传来的参数。
这里我们通常会用到 title，以显示页面信息，同时附上 title 显示对应 ui
// 自定义工具库import Utils from "../../../common/utils/Utils";
@Component // 通用头部export struct NavBar { @Prop title: string = ''; // 标题 @Prop backImg: string = ''; // 可以选择的自定义返回按钮图标 @Prop bgColor: string = '#FFFFFF'; // NavBar自定义背景颜色 @Prop customBack?: () => void; // 自定义返回函数 @Prop mode: string = 'center'; // left center 标题文字位置
build() { Row() { // 最左边内容，返回按钮 Row() { Image(this.backImg || Utils.getImgPath('home/adult_page_back_black.png')) .width(Utils.getVp(48)) .height(Utils.getVp(48)) .objectFit(ImageFit.Cover) } .onClick(() => { // 传递了返回函数就使用 if (this.customBack) { this.customBack() } else { router.back(); } })
// title显示 Row() { Text(this.title) .fontColor('#191B27') .fontSize(Utils.getVp(33)) .fontWeight(FontWeight.Bold) .textAlign(this.mode == 'center' ? TextAlign.Center : TextAlign.Start) .width('100%') } .margin({ left: this.mode == 'center' ? 0 : Utils.getVp(20), }) // 占满剩余内容 .flexShrink(1) .height('100%') } .width('100%') .padding({ left: Utils.getVp(32), right: Utils.getVp(32), }) .height(Utils.getVp(88)) .backgroundColor(this.bgColor) }}
复制代码
父组件中使用
import { NavBar } from './component/NavBar';
@Entry@Componentstruct Father { build() { Column() { NavBar({ title: '我是一个标题', mode: 'center', }) } .width('100%') .height('100%') }}
复制代码
如果想要将标题放在靠左边，则可以将父组件里面的 mode 传参改为 left
import { NavBar } from './component/NavBar';
@Entry@Componentstruct Father { build() { Column() { NavBar({ title: '我是一个标题', mode: 'left', }) } .width('100%') .height('100%') }}
复制代码
其余参数可以根据需求传递，也可以根据不同需求扩展 Prop 字段
总结
做一个简易版的通用头部需要使用**@Component**装饰器创建一个组件
在组件上预设好 ui，使用**@Prop**填充，在父组件调用时传入即可
评论