ComposeTitleBar

一种普通标题栏，支持设置标题、头像（可选）和副标题（可选），可用于一级页面、二级及其以上界面配置返回键。

说明：

该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import { ComposeTitleBar } from '@kit.ArkUI'

子组件

无

属性

不支持通用属性。

ComposeTitleBar

ComposeTitleBar({item?: ComposeTitleBarMenuItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<ComposeTitleBarMenuItem>})

装饰器类型：@Component

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
item	ComposeTitleBarMenuItem	否	用于左侧头像的单个菜单项目。
title	ResourceStr	是	标题。
subtitle	ResourceStr	否	副标题。
menuItems	Array<ComposeTitleBarMenuItem>	否	右侧菜单项目列表。

说明：

入参对象不可为undefined，即ComposeTitleBar(undefined)。

ComposeTitleBarMenuItem

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
value	ResourceStr	是	图标资源。 原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
label13+	ResourceStr	否	图标标签描述。 原子化服务API： 从API version 13开始，该接口支持在原子化服务中使用。
isEnabled	boolean	否	是否启用，默认禁用。 isEnabled为true时，表示为启用。 isEnabled为false时，表示为禁用。 item属性不支持触发isEnabled属性。 原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
action	() => void	否	触发时的动作闭包，item属性不支持触发action事件。 原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

事件

不支持通用事件。

示例

该示例实现了简单的标题栏，带有返回箭头的标题栏和带有右侧菜单项目列表的标题栏。

import { ComposeTitleBar, promptAction, ComposeTitleBarMenuItem } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  //定义右侧菜单项目列表
  private menuItems: Array<ComposeTitleBarMenuItem> = [
    {
      //菜单图片资源
      value: $r('sys.media.ohos_save_button_filled'),
      //启用图标
      isEnabled: true,
      //点击菜单时触发事件
      action: () => promptAction.showToast({ message: "show toast index 1" })
    },
    {
      value: $r('sys.media.ohos_ic_public_copy'),
      isEnabled: true,
      action: () => promptAction.showToast({ message: "show toast index 1" })
    },
    {
      value: $r('sys.media.ohos_ic_public_edit'),
      isEnabled: true,
      action: () => promptAction.showToast({ message: "show toast index 1" })
    },
    {
      value: $r('sys.media.ohos_ic_public_remove'),
      isEnabled: true,
      action: () => promptAction.showToast({ message: "show toast index 1" })
    },
  ]

  build() {
    Row() {
      Column() {
        //分割线
        Divider().height(2).color(0xCCCCCC)
        ComposeTitleBar({
          title: "标题",
          subtitle: "副标题",
          menuItems: this.menuItems.slice(0, 1),
        })
        Divider().height(2).color(0xCCCCCC)
        ComposeTitleBar({
          title: "标题",
          subtitle: "副标题",
          menuItems: this.menuItems.slice(0, 2),
        })
        Divider().height(2).color(0xCCCCCC)
        ComposeTitleBar({
          title: "标题",
          subtitle: "副标题",
          menuItems: this.menuItems,
        })
        Divider().height(2).color(0xCCCCCC)
        //定义带头像的标题栏
        ComposeTitleBar({
          menuItems: [{ isEnabled: true, value: $r('sys.media.ohos_save_button_filled'),
            action: () => promptAction.showToast({ message: "show toast index 1" })
          }],
          title: "标题",
          subtitle: "副标题",
          item: { isEnabled: true, value: $r('sys.media.ohos_app_icon') }
        })
        Divider().height(2).color(0xCCCCCC)
      }
    }.height('100%')
  }
}