HarmonyOS 鸿蒙Next 页面标题栏应使用哪个标准组件

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

HarmonyOS 鸿蒙Next 页面标题栏应使用哪个标准组件

我现在使用的

```typescript
[@Prop](/user/Prop) name: string = ''

ComposeTitleBar({
  title: this.name || '动图详情',
})

但是当name更新的时候，标题栏的标题并不会变化

Harmonyos Next教程
2 回复

如果单纯实现标题栏动态改变的话，使用 Image 和Text组件也能实现标题的效果，参考代码如下：

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State name: string = '大大大'

  build() {
    Row() {
      Column() {
        Row() {
          Image($r('app.media.app_icon'))
            .width('6%')
            .height('30%')
            .margin('7%')
            .onClick(() => {
              AppStorage.setOrCreate('location', 1);
              router.pushUrl({ url: 'pages/MainPage' })
            })
          Text(this.name)
            .fontSize(20)
            .width('100%')
            .height('100%')
            .fontColor(Color.Black)
            .margin({ left: '7%' })

        }.height('5%')
        Text('改变标题')
          .onClick(()=>{
            this.name = '小小小'
          })
          .layoutWeight(1)
      }
    }
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 页面标题栏应使用哪个标准组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，页面标题栏通常应使用系统提供的标准组件“TitleBar”或“Toolbar”。这两个组件都可用于设置页面的标题、导航按钮（如返回按钮）以及其他可能的操作按钮。

  1. TitleBar：这是一个较为基础的标题栏组件，通常包含页面的标题和返回按钮。它适用于简单的页面，其中不需要过多的导航或操作按钮。

  2. Toolbar：相较于TitleBar，Toolbar提供了更多的自定义选项和扩展性。它不仅可以显示标题和返回按钮，还可以添加其他自定义按钮、菜单项等。Toolbar更适合需要复杂导航或操作按钮的页面。

在选择使用哪个组件时，开发者应根据页面的具体需求和设计来决定。如果页面较为简单，且只需要基本的标题和返回功能，那么TitleBar可能是一个更好的选择。而如果页面需要更多的导航或操作按钮，或者需要更高的自定义程度，那么Toolbar则更为合适。

如果在使用这些组件时遇到问题，例如无法正确显示或功能异常，建议检查组件的属性和事件绑定是否正确。如果问题依旧没法解决请联系官网客服，官网地址是：

https://www.itying.com/category-93-b0.html。

回到顶部