鸿蒙开发小例-使用@Builder封装Navigation组件标题栏

Navigation组件的title属性支持CustomBuilder，让我们用@Builder自定义一个通用的标题栏吧。

实现效果

代码实现

constants中定义了一些通用的数值和颜色，可自行替换。

引入自定义的SubPageTitleBar，放入Navigation组件title属性中。

import SubPageTitleBar from '../components/SubPageTitleBar'

Navigation() {
    // ...
}
.title(SubPageTitleBar($r('app.string.page_about_title')))

自定义构建函数：

@Builder
export default function NavigationTitle (title: Resource) {
  Row({ space: constants.UI.SPACE }) {
    Text(title).fontSize(26)
  }
  .width('100%')
  .height(constants.UI.NAV_HEIGHT / 2)
  .justifyContent(FlexAlign.Start)
}

一个简单的自定义构建函数就完成啦~

尝试加入更多功能，让标题栏丰富起来吧！

完结散花

如发现文章内容有任何问题，请提出您的宝贵意见予以指正，感谢您的阅读。