1# @ohos.arkui.advanced.ComposeTitleBar (头像和单双行文本标题栏) 2 3 4一种普通标题栏，支持设置标题、头像（可选）和副标题（可选），可用于一级页面、二级及其以上界面配置返回键。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar" 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24不支持[通用属性](ts-universal-attributes-size.md) 25 26 27## ComposeTitleBar 28 29ComposeTitleBar({item?: ComposeTitleBarMenuItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<ComposeTitleBarMenuItem>}) 30 31**装饰器类型：**\@Component 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 名称 | 参数类型 | 必填 | 说明 | 38| -------- | -------- | -------- | -------- | 39| item | [ComposeTitleBarMenuItem](#composetitlebarmenuitem) | 否 | 用于左侧头像的单个菜单项目。 | 40| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 标题。 | 41| subtitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 副标题。 | 42| menuItems | Array<[ComposeTitleBarMenuItem](#composetitlebarmenuitem)> | 否 | 右侧菜单项目列表。 | 43 44 45## ComposeTitleBarMenuItem 46 47| 名称 | 类型 | 必填 | 说明 | 48| -------- | -------- | -------- | -------- | 49| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。 | 50| isEnabled | boolean | 否 | 是否启用，默认禁用。<br> isEnabled为true时，表示为启用。<br> isEnabled为false时，表示为禁用。 | 51| action | () => void | 否 | 触发时的动作闭包，item属性不支持触发action事件。 | 52 53## 事件 54不支持[通用事件](ts-universal-events-click.md) 55 56## 示例 57 58```ts 59import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar" 60import promptAction from '@ohos.promptAction' 61 62interface menuItem { 63 value: Resource; 64 isEnabled?: boolean; 65 action?: () => void 66} 67 68@Entry 69@Component 70struct Index { 71 private menuItems: Array<menuItem> = [ 72 { 73 value: $r('app.media.ic_public_save'), 74 isEnabled: true, 75 action: () => promptAction.showToast({ message: "show toast index 1" }) 76 }, 77 { 78 value: $r('app.media.ic_public_save'), 79 isEnabled: true, 80 action: () => promptAction.showToast({ message: "show toast index 1" }) 81 }, 82 { 83 value: $r('app.media.ic_public_save'), 84 isEnabled: true, 85 action: () => promptAction.showToast({ message: "show toast index 1" }) 86 }, 87 { 88 value: $r('app.media.ic_public_save'), 89 isEnabled: true, 90 action: () => promptAction.showToast({ message: "show toast index 1" }) 91 }, 92 ] 93 94 build() { 95 Row() { 96 Column() { 97 Divider().height(2).color(0xCCCCCC) 98 ComposeTitleBar({ 99 title: "标题", 100 subtitle: "副标题", 101 menuItems: this.menuItems.slice(0, 1), 102 }) 103 Divider().height(2).color(0xCCCCCC) 104 ComposeTitleBar({ 105 title: "标题", 106 subtitle: "副标题", 107 menuItems: this.menuItems.slice(0, 2), 108 }) 109 Divider().height(2).color(0xCCCCCC) 110 ComposeTitleBar({ 111 title: "标题", 112 subtitle: "副标题", 113 menuItems: this.menuItems, 114 }) 115 Divider().height(2).color(0xCCCCCC) 116 ComposeTitleBar({ 117 menuItems: [{ isEnabled: true, value: $r('app.media.ic_public_save'), 118 action: () => promptAction.showToast({ message: "show toast index 1" }) 119 }], 120 title: "标题", 121 subtitle: "副标题", 122 item: { isEnabled: true, value: $r('app.media.app_icon') } 123 }) 124 Divider().height(2).color(0xCCCCCC) 125 } 126 }.height('100%') 127 } 128} 129``` 130 131 132
