HarmonyOS 鸿蒙Next 公共的头部如何实现，带有标题和返回按钮

公共的头部如何实现，带有标题和返回按钮

可参考

[@Component](/user/Component)
struct CommonTitle{
  build(){
    Flex({justifyContent: FlexAlign.Center}){
      Image($r('app.media.arrow_left')).width(24)
      Column(){
        Text('我是标题')
          .fontSize(24)
      }
      .alignItems(HorizontalAlign.Center)
      .width('calc(100% - 24vp)')
}
.width(<span class="hljs-string">'100%'</span>)
}
}
@Entry
@Component
struct ShangH_issue06_01 {
@State message: string = ‘Hello World’;
build() {
Column() {
CommonTitle();
Text(this.message)
.id(‘ShangH_issue06_01HelloWorld’)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: ‘container’, align: VerticalAlign.Center },
middle: { anchor: ‘container’, align: HorizontalAlign.Center }
}).backgroundColor(Color.Pink)
.onClick(() => {
})
}
.padding(10)
.height(‘100%’)
.width(‘100%’)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

itying888 2楼•2 天前

在HarmonyOS 鸿蒙Next系统中，实现带有标题和返回按钮的公共头部，可以遵循以下步骤：

首先，需要利用HarmonyOS提供的UI框架，如ArkUI，来设计头部布局。在布局文件中，可以定义一个包含标题和返回按钮的容器。标题部分可以使用Text组件来显示，而返回按钮则可以使用Button组件。

其次，为了实现返回按钮的功能，需要为按钮设置点击事件监听器。在点击事件中，可以调用系统提供的导航API，如router.back()方法，以实现返回上一页的功能。如果希望点击返回按钮时直接退出当前应用并返回到桌面，可以调用应用上下文中的moveAbilityToBackground()方法，将当前Ability移到后台。

最后，为了保持头部布局的公共性和复用性，建议将上述布局和逻辑封装成一个自定义组件。这样，在需要的地方，只需引入该组件并传入相应的标题和点击事件处理函数即可。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html