HarmonyOS 鸿蒙Next Navigation定制化

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Navigation定制化

Navigation定制化

咨询场景描述：
现在有Navigation的模式不能满足需求,用
深色代码主题
复制
@Builder
NavigationTitle() {
Column() {
Text(‘首页’)
.fontColor(’#182431’)
.fontSize(30)
.lineHeight(41)
.fontWeight(700)
.height(‘100%’)
}
.width(‘100%’) //【1】标题父布局要撑满
.height(‘100%’)
.backgroundColor(Color.Gray)
.margin({
left: -25,
})
}

这种方式可以构建,但是右上角标和push之后的返回样式都有问题
有什么方式可以使用如图样式

标题居中,右角标支持纯文字(现有nav模式找到是图标+文字),可设置nav头的背景色


更多关于HarmonyOS 鸿蒙Next Navigation定制化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可以用下面这种方式解决居中问题

深色代码主题
复制
import { router } from '@kit.ArkUI'

@Entry
@Component
struct TestPage {
@Builder
NavigationTitle() {


<span class="hljs-title class_">Column</span>() {
  <span class="hljs-title class_">Stack</span>({ <span class="hljs-attr">alignContent</span>: <span class="hljs-title class_">Alignment</span>.<span class="hljs-property">Center</span> }) {
    <span class="hljs-title class_">Row</span>() {
      <span class="hljs-title class_">Image</span>($r(<span class="hljs-string">'app.media.app_icon'</span>))
        .<span class="hljs-title function_">width</span>(<span class="hljs-number">30</span>).<span class="hljs-title function_">height</span>(<span class="hljs-number">30</span>).<span class="hljs-title function_">onClick</span>(<span class="hljs-function">() =&gt;</span> {
        router.<span class="hljs-title function_">back</span>()
      })

      <span class="hljs-title class_">Text</span>(<span class="hljs-string">'申请查询'</span>)
    }
    .<span class="hljs-title function_">justifyContent</span>(<span class="hljs-title class_">FlexAlign</span>.<span class="hljs-property">SpaceBetween</span>)
    .<span class="hljs-title function_">width</span>(<span class="hljs-string">'100%'</span>)

    <span class="hljs-title class_">Text</span>(<span class="hljs-string">'首页'</span>)
      .<span class="hljs-title function_">fontSize</span>(<span class="hljs-number">24</span>)
      .<span class="hljs-title function_">fontWeight</span>(<span class="hljs-title class_">FontWeight</span>.<span class="hljs-property">Bold</span>)
  }
  .<span class="hljs-title function_">padding</span>(<span class="hljs-number">20</span>)
}
.<span class="hljs-title function_">width</span>(<span class="hljs-string">'100%'</span>) <span class="hljs-comment">//【1】标题父布局要撑满</span>
.<span class="hljs-title function_">height</span>(<span class="hljs-string">'100%'</span>)
.<span class="hljs-title function_">backgroundColor</span>(<span class="hljs-title class_">Color</span>.<span class="hljs-property">Gray</span>)
.<span class="hljs-title function_">expandSafeArea</span>([<span class="hljs-title class_">SafeAreaType</span>.<span class="hljs-property">SYSTEM</span>], [<span class="hljs-title class_">SafeAreaEdge</span>.<span class="hljs-property">TOP</span>])

}


build() {
Navigation() {
}
.title(this.NavigationTitle)
.titleMode(NavigationTitleMode.Mini)
.hideBackButton(true)
.width(‘100%’)
.height(‘100%’)
.backgroundColor(’#F1F3F5’)
}
}

更多关于HarmonyOS 鸿蒙Next Navigation定制化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next Navigation定制化主要通过修改系统提供的导航栏UI组件和交互逻辑来实现。以下是一些关键步骤：

  1. 获取权限：确保你的应用或设备已获得必要的系统权限，以修改导航栏。

  2. 自定义布局：使用HarmonyOS提供的XML布局文件，定义新的导航栏布局。可以添加自定义按钮、图标等元素。

  3. 实现交互逻辑：在JavaScript或Dart（如果适用）中编写代码，处理导航栏按钮的点击事件和其他交互逻辑。确保这些逻辑与系统的其他部分兼容。

  4. 替换系统导航栏：通过系统API或特定方法，将自定义的导航栏替换为系统默认的导航栏。这一步可能需要深入系统层面的修改，确保与HarmonyOS的底层框架兼容。

  5. 测试与调试：在多种设备和场景下测试自定义导航栏的功能和稳定性，确保没有引入新的问题。

  6. 发布与更新：如果定制化成功，可以将更新发布到相关设备或应用市场中。

请注意，以上步骤仅提供了一般性的指导，具体实现可能因HarmonyOS的版本和设备的不同而有所差异。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部