1# EditableTitleBar 2 3 4编辑型标题栏，适用于多选界面或者内容的编辑界面，一般采取左叉右勾的形式。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10> 11> 该组件不支持在Wearable设备上使用。 12 13 14## 导入模块 15 16``` 17import { EditableTitleBar } from '@kit.ArkUI'; 18``` 19 20 21## 子组件 22 23无 24 25## 属性 26不支持[通用属性](ts-component-general-attributes.md)。 27 28 29## EditableTitleBar 30 31EditableTitleBar({leftIconStyle: EditableLeftIconType, imageItem?: EditableTitleBarItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<EditableTitleBarMenuItem>, isSaveIconRequired: boolean, onSave?: () => void, onCancel?: () =>void, options: EditableTitleBarOptions, contentMargin?: LocalizedMargin, leftIconDefaultFocus?: boolean, saveIconDefaultFocus?: boolean}) 32 33**装饰器类型：**\@Component 34 35**系统能力：** SystemCapability.ArkUI.ArkUI.Full 36 37| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 38| -------- | -------- | -------- | -------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 39| leftIconStyle | [EditableLeftIconType](#editablelefticontype) | 是 | - | 左侧按钮类型。<br />默认值：EditableLeftIconType.Back，表示返回。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 40| imageItem<sup>12+</sup> | [EditableTitleBarItem](#editabletitlebaritem12) | 否 | - | 用于左侧头像的单个菜单项目。<br />默认值：undefined。<br/>**说明：** 左侧头像不支持配置无障碍属性。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 41| title | [ResourceStr](ts-types.md#resourcestr) | 是 | - | 标题。<br />默认值：''，表示标题内容为空。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 42| subtitle<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 副标题。<br />默认值：''，表示副标题内容为空。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 43| menuItems | Array<[EditableTitleBarMenuItem](#editabletitlebarmenuitem)> | 否 | - | 右侧菜单项目列表。<br />默认值：undefined。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 44| isSaveIconRequired<sup>12+</sup> | boolean | 是 | - | 是否需要右侧的保存按钮。<br />默认值：true，表示需要右侧的保存按钮。<br/>**说明：** 未使用@Require装饰，构造时不强制校验参数。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 45| onSave | () => void | 否 | - | 保存时的动作闭包。<br />默认值：() => void。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 46| onCancel | () => void | 否 | - | 当左侧按钮类型为 Cancel，触发取消时的动作闭包。<br />默认值：() => void。<br />从API version 12开始，当左侧按钮类型为 Back，触发返回时的动作闭包。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 47| options<sup>12+</sup> | [EditableTitleBarOptions](#editabletitlebaroptions12) | 是 | - | 标题样式。<br />默认值：<br />{<br />safeAreaTypes: [SafeAreaType.SYSTEM],<br />safeAreaEdges: [SafeAreaEdge.TOP], <br />backgroundColor: '#00000000'<br />}。<br/>**说明：** 未使用@Require装饰，构造时不强制校验参数。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 48| contentMargin<sup>12+</sup> | [LocalizedMargin](ts-types.md#localizedmargin12) | 否 | @Prop | 标题栏外边距，不支持设置负数。<br />默认值：<br /> {start: LengthMetrics.resource(`$r('sys.float.margin_left')`), end: LengthMetrics.resource(`$r('sys.float.margin_right')`)}。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 49| leftIconDefaultFocus<sup>18+</sup> | boolean | 否 | - | 左侧图标是否为默认焦点。<br />默认值：false，表示不是默认焦点。 <br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 50| saveIconDefaultFocus<sup>18+</sup> | boolean | 否 | - | 保存图标是否为默认焦点。<br />默认值：false，表示不是默认焦点。 <br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 51 52> **说明：** 53> 54> 入参对象不可为undefined，即`EditableTitleBar(undefined)`。 55> 若同时有多个可操作区域设置值默认焦点，则设置过默认焦点的可操作区域中显示顺序的第一个为默认焦点。 56 57## EditableLeftIconType 58 59**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63| 名称 | 值 | 说明 | 64| -------- | -------- | -------- | 65| Back | 0 | 返回按钮。 | 66| Cancel | 1 | 取消按钮。 | 67 68## EditableTitleBarMenuItem 69 70**系统能力：** SystemCapability.ArkUI.ArkUI.Full 71 72| 名称 | 类型 | 必填 | 说明 | 73| -------- | -------- | -------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 74| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 75| symbolStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | Symbol图标资源，优先级大于value。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 76| label<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标标签描述。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 77| isEnabled | boolean | 否 | 是否启用，默认启用。<br> isEnabled为true时，表示为启用。<br> isEnabled为false时，表示为禁用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 78| action | () => void | 否 | 触发时的动作闭包。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 79| accessibilityLevel<sup>18+<sup> | string | 否 | 标题栏右侧自定义按钮无障碍重要性。用于控制当前项是否可被无障碍辅助服务所识别。<br/>支持的值为：<br/>"auto"：当前组件会转换'yes'。<br/>"yes"：当前组件可被无障碍辅助服务所识别。<br/>"no"：当前组件不可被无障碍辅助服务所识别。<br/>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br/>默认值："auto"。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 80| accessibilityText<sup>18+<sup> | ResourceStr | 否 | 标题栏右侧自定义按钮的无障碍文本属性。当组件不包含文本属性时，屏幕朗读选中此组件时不播报，使用者无法清楚地知道当前选中了什么组件。为了解决此场景，开发人员可为不包含文字信息的组件设置无障碍文本，当屏幕朗读选中此组件时播报无障碍文本的内容，帮助屏幕朗读的使用者清楚地知道自己选中了什么组件。<br/>默认值：有label默认值为当前项label属性内容，没有设置label时，默认值为“ ”。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 81| accessibilityDescription<sup>18+<sup> | ResourceStr | 否 | 标题栏右侧自定义按钮的无障碍描述。此描述用于向用户详细解释当前组件，开发人员应为组件的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从组件的属性和无障碍文本中直接获知时。如果组件同时具备文本属性和无障碍说明属性，当组件被选中时，系统将首先播报组件的文本属性，随后播报无障碍说明属性的内容。<br/>默认值为“单指双击即可执行”。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 82| defaultFocus<sup>18+<sup> | boolean | 否 | 是否设置为默认获焦。<br/>true: 获焦 <br/>false: 不获焦 <br/>默认值：false <br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 83 84## EditableTitleBarItem<sup>12+</sup> 85 86type EditableTitleBarItem = EditableTitleBarMenuItem 87 88**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92| 类型 | 说明 | 93| -------- | -------- | 94| [EditableTitleBarMenuItem](#editabletitlebarmenuitem) | 左侧头像的单个菜单类型。 | 95 96## EditableTitleBarOptions<sup>12+</sup> 97 98**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 99 100**系统能力：** SystemCapability.ArkUI.ArkUI.Full 101 102| 名称 | 类型 | 必填 | 说明 | 103| -------- | -------- | -------- | -------- | 104| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 标题栏背景色。<br />默认值: '#00000000'| 105| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 标题栏背景模糊样式。<br />默认值: [BlurStyle.NONE]| 106| safeAreaTypes | Array <[SafeAreaType](ts-types.md#safeareatype10)> | 否 | 非必填，配置扩展安全区域的类型。<br />默认值: [SafeAreaType.SYSTEM] | 107| safeAreaEdges | Array <[SafeAreaEdge](ts-types.md#safeareaedge10)> | 否 | 非必填，配置扩展安全区域的方向。<br />默认值: [SafeAreaEdge.TOP] | 108 109## 事件 110不支持[通用事件](ts-component-general-events.md)。 111 112## 示例 113 114### 示例1（右侧图标自定义标题栏） 115 该示例主要演示EditableTitleBar设置左侧图标、主标题及自定义右侧图标区的效果。 116 117```ts 118import { EditableLeftIconType, EditableTitleBar, Prompt } from '@kit.ArkUI'; 119 120@Entry 121@Component 122struct Index { 123 build() { 124 Row() { 125 Column() { 126 Divider().height(2).color(0xCCCCCC) 127 // 左侧取消按钮，右侧保存按钮。 128 EditableTitleBar({ 129 leftIconStyle: EditableLeftIconType.Cancel, 130 title: '编辑页面', 131 menuItems: [], 132 onCancel: () => { 133 Prompt.showToast({ message: 'on cancel' }); 134 }, 135 onSave: () => { 136 Prompt.showToast({ message: 'on save' }); 137 } 138 }) 139 Divider().height(2).color(0xCCCCCC) 140 // 左侧返回按钮，右侧自定义取消按钮（disabled）、保存按钮。 141 EditableTitleBar({ 142 leftIconStyle: EditableLeftIconType.Back, 143 title: '编辑页面', 144 menuItems: [ 145 { 146 value: $r('sys.media.ohos_ic_public_cancel'), 147 isEnabled: false, 148 action: () => { 149 Prompt.showToast({ message: 'show toast index 2' }); 150 } 151 } 152 ], 153 onSave: () => { 154 Prompt.showToast({ message: 'on save' }) 155 } 156 }) 157 Divider().height(2).color(0xCCCCCC) 158 }.width('100%') 159 }.height('100%') 160 } 161} 162``` 163 164 165 166### 示例2（头像与背景模糊标题栏） 167该示例主要演示EditableTitleBar设置背景模糊、头像；取消右侧保存图标及自定义标题栏外边距的效果。 168 169```ts 170import { EditableLeftIconType, EditableTitleBar, LengthMetrics, Prompt, router } from '@kit.ArkUI'; 171 172@Entry 173@Component 174struct Index { 175 @State titleBarMargin: LocalizedMargin = { 176 start: LengthMetrics.vp(35), 177 end: LengthMetrics.vp(35), 178 }; 179 180 build() { 181 Row() { 182 Column() { 183 EditableTitleBar({ 184 leftIconStyle: EditableLeftIconType.Cancel, 185 title: '主标题', 186 subtitle: '副标题', 187 // 设置背景模糊效果 188 options: { 189 backgroundBlurStyle: BlurStyle.COMPONENT_THICK, 190 }, 191 onSave: () => { 192 Prompt.showToast({ message: "on save" }); 193 }, 194 }) 195 Divider().height(2).color(0xCCCCCC); 196 EditableTitleBar({ 197 leftIconStyle: EditableLeftIconType.Cancel, 198 title: '主标题', 199 subtitle: '副标题', 200 // 取消右侧保存按钮 201 isSaveIconRequired: false, 202 }) 203 Divider().height(2).color(0xCCCCCC); 204 EditableTitleBar({ 205 leftIconStyle: EditableLeftIconType.Back, 206 title: '主标题', 207 subtitle: '副标题', 208 isSaveIconRequired: false, 209 onCancel: () => { 210 this.getUIContext()?.getRouter()?.back(); 211 }, 212 }) 213 Divider().height(2).color(0xCCCCCC); 214 EditableTitleBar({ 215 leftIconStyle: EditableLeftIconType.Back, 216 title: '主标题', 217 subtitle: '副标题', 218 menuItems: [ 219 { 220 value: $r('sys.media.ohos_ic_public_remove'), 221 isEnabled: true, 222 action: () => { 223 Prompt.showToast({ message: "show toast index 1" }); 224 } 225 } 226 ], 227 isSaveIconRequired: false, 228 // 点击左侧Back图标，触发的动作。 229 onCancel: () => { 230 this.getUIContext()?.getRouter()?.back(); 231 }, 232 }) 233 Divider().height(2).color(0xCCCCCC); 234 EditableTitleBar({ 235 leftIconStyle: EditableLeftIconType.Back, 236 title: '主标题', 237 subtitle: '副标题', 238 // 设置可点击头像 239 imageItem: { 240 value: $r('sys.media.ohos_ic_normal_white_grid_image'), 241 isEnabled: true, 242 action: () => { 243 Prompt.showToast({ message: "show toast index 2" }); 244 } 245 }, 246 // 设置标题栏外边距 247 contentMargin: this.titleBarMargin, 248 // 右侧图标配置 249 menuItems: [ 250 { 251 value: $r('sys.media.ohos_ic_public_remove'), 252 isEnabled: true, 253 action: () => { 254 Prompt.showToast({ message: "show toast index 3" }); 255 } 256 } 257 ], 258 onCancel: () => { 259 this.getUIContext()?.getRouter()?.back(); 260 }, 261 }) 262 } 263 } 264 } 265} 266``` 267 268 269 270### 示例3（右侧自定义按钮播报） 271该示例通过设置标题栏的右侧自定义按钮属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。 272```ts 273 274import { Prompt, router, EditableLeftIconType, EditableTitleBar } from '@kit.ArkUI'; 275 276@Entry 277@Component 278struct Index1 { 279 build() { 280 Row() { 281 Column() { 282 Divider().height(2).color(0xCCCCCC) 283 EditableTitleBar({ 284 leftIconStyle: EditableLeftIconType.Cancel, 285 title: '编辑页面', 286 menuItems: [], 287 onCancel: () => { 288 Prompt.showToast({ message: 'on cancel' }); 289 }, 290 onSave: () => { 291 Prompt.showToast({ message: 'on save' }); 292 } 293 }) 294 Divider().height(2).color(0xCCCCCC) 295 EditableTitleBar({ 296 // 头像、自定义按钮不可用 297 leftIconStyle: EditableLeftIconType.Back, 298 title: '主标题', 299 subtitle: '副标题', 300 imageItem: { 301 value: $r('sys.media.ohos_ic_normal_white_grid_image'), 302 isEnabled: true, 303 action: () => { 304 Prompt.showToast({ message: "show toast index 1" }); 305 } 306 }, 307 menuItems: [ 308 { 309 value: $r('sys.media.ohos_ic_public_remove'), 310 label: '取消', 311 isEnabled: false, 312 accessibilityText: '删除', 313 accessibilityDescription: '点击即可删除', 314 action: () => { 315 Prompt.showToast({ message: "show toast index 2" }); 316 } 317 } 318 ], 319 onCancel: () => { 320 this.getUIContext()?.getRouter()?.back(); 321 }, 322 }) 323 Divider().height(2).color(0xCCCCCC) 324 } 325 } 326 } 327} 328``` 329 330 331### 示例4（左侧图标设置为默认焦点） 332该示例通过设置标题栏属性leftIconDefaultFocus使左侧图标默认获焦。 333```ts 334 335import { Prompt, EditableLeftIconType, EditableTitleBar } from '@kit.ArkUI'; 336 337@Entry 338@Component 339struct Index { 340 build() { 341 Column() { 342 EditableTitleBar({ 343 leftIconStyle: EditableLeftIconType.Back, 344 leftIconDefaultFocus: true, //设置左侧图标默认获焦。 345 title: '编辑页面', 346 menuItems: [], 347 onSave: () => { 348 Prompt.showToast({ message: 'on save' }); 349 } 350 }) 351 } 352 .height('100%') 353 .width('100%') 354 } 355} 356``` 357 358 359### 示例5（右侧自定义图标设置为默认焦点） 360该示例通过设置标题栏右侧图标属性defaultFocus使右侧图标默认获焦。 361```ts 362 363import { Prompt, EditableLeftIconType, EditableTitleBar, router } from '@kit.ArkUI'; 364 365@Entry 366@Component 367struct Index { 368 build() { 369 Column() { 370 EditableTitleBar({ 371 leftIconStyle: EditableLeftIconType.Back, 372 title: '主标题', 373 subtitle: '副标题', 374 // 右侧图标配置 375 menuItems: [ 376 { 377 value: $r('sys.media.ohos_ic_public_remove'), 378 isEnabled: true, 379 action: () => { 380 Prompt.showToast({ message: "show toast index 1" }); 381 } 382 }, 383 { 384 value: $r('sys.media.ohos_ic_public_remove'), 385 isEnabled: true, 386 defaultFocus: true, 387 action: () => { 388 Prompt.showToast({ message: "show toast index 2" }); 389 } 390 } 391 ], 392 onCancel: () => { 393 this.getUIContext()?.getRouter()?.back(); 394 }, 395 }) 396 } 397 .height('100%') 398 .width('100%') 399 } 400} 401``` 402 403 404### 示例6（设置Symbol类型图标） 405 406该示例通过设置EditableTitleBarMenuItem的属性symbolStyle，展示了自定义Symbol类型图标。 407 408```ts 409import { EditableLeftIconType, EditableTitleBar, Prompt, SymbolGlyphModifier } from '@kit.ArkUI'; 410 411@Entry 412@Component 413struct Index { 414 build() { 415 Row() { 416 Column() { 417 Divider().height(2).color(0xCCCCCC) 418 EditableTitleBar({ 419 leftIconStyle: EditableLeftIconType.Cancel, 420 title: '主标题', 421 subtitle: '副标题', 422 menuItems: [ 423 { 424 value: $r('sys.symbol.house'), 425 isEnabled: true, 426 action: () => { 427 Prompt.showToast({ message: 'show toast index 2' }); 428 } 429 }, 430 { 431 value: $r('sys.symbol.car'), 432 isEnabled: false, 433 } 434 ], 435 }) 436 Divider().height(2).color(0xCCCCCC) 437 EditableTitleBar({ 438 leftIconStyle: EditableLeftIconType.Back, 439 title: '主标题', 440 subtitle: '副标题', 441 imageItem: { 442 value: $r('sys.media.ohos_app_icon'), 443 isEnabled: true, 444 action: () => { 445 Prompt.showToast({ message: "show toast index 1" }); 446 } 447 }, 448 menuItems: [ 449 { 450 value: $r('sys.symbol.house'), 451 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.bell')).fontColor([Color.Red]), 452 isEnabled: true, 453 action: () => { 454 Prompt.showToast({ message: 'show toast index 2' }); 455 } 456 }, 457 { 458 value: $r('sys.symbol.car'), 459 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.heart')).fontColor([Color.Blue]), 460 isEnabled: false, 461 } 462 ], 463 }) 464 Divider().height(2).color(0xCCCCCC) 465 }.width('100%') 466 }.height('100%') 467 } 468} 469``` 470 471
