1# EditableTitleBar 2 3 4编辑型标题栏，适用于多选界面或者内容的编辑界面，一般采取左叉右勾的形式。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { EditableTitleBar } from '@kit.ArkUI' 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24不支持[通用属性](ts-universal-attributes-size.md) 25 26 27## EditableTitleBar 28 29EditableTitleBar({leftIconStyle: EditableLeftIconType, imageItem?: EditableTitleBarItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<EditableTitleBarMenuItem>, isSaveIconRequired: boolean, onSave?: () => void, onCancel?: () =>void, options: EditableTitleBarOptions, contentMargin?: LocalizedMargin}) 30 31**装饰器类型：**\@Component 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 36| -------- | -------- | -------- | -------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 37| leftIconStyle | [EditableLeftIconType](#editablelefticontype) | 是 | - | 左侧按钮类型。<br />默认值：EditableLeftIconType.Back，表示返回。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 38| imageItem<sup>12+</sup> | [EditableTitleBarItem](#editabletitlebaritem12) | 否 | - | 用于左侧头像的单个菜单项目。<br />默认值：undefined。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 39| title | [ResourceStr](ts-types.md#resourcestr) | 是 | - | 标题。<br />默认值：''，表示标题内容为空。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 40| subtitle<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 副标题。<br />默认值：''，表示副标题内容为空。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 41| menuItems | Array<[EditableTitleBarMenuItem](#editabletitlebarmenuitem)> | 否 | - | 右侧菜单项目列表。<br />默认值：undefined。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 42| isSaveIconRequired<sup>12+</sup> | boolean | 是 | - | 是否需要右侧的保存按钮。<br />默认值：true，表示需要右侧的保存按钮。<br/>**说明：** 未使用@Require装饰，构造时不强制校验参数。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 43| onSave | () => void | 否 | - | 保存时的动作闭包。<br />默认值：() => void。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 44| onCancel | () => void | 否 | - | 当左侧按钮类型为 Cancel，触发取消时的动作闭包。<br />默认值：() => void。<br />从API version 12开始，当左侧按钮类型为 Back，触发返回时的动作闭包。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 45| 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开始，该接口支持在原子化服务中使用。 | 46| 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开始，该接口支持在原子化服务中使用。 | 47 48> **说明：** 49> 50> 入参对象不可为undefined，即`EditableTitleBar(undefined)`。 51 52## EditableLeftIconType 53 54**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58| 名称 | 值 | 说明 | 59| -------- | -------- | -------- | 60| Back | 0 | 返回按钮。 | 61| Cancel | 1 | 取消按钮。 | 62 63## EditableTitleBarMenuItem 64 65**系统能力：** SystemCapability.ArkUI.ArkUI.Full 66 67| 名称 | 类型 | 必填 | 说明 | 68| -------- | -------- | -------- |-----------------------------------------------------------------------------------------------------------------------| 69| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 70| label<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标标签描述。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 71| isEnabled | boolean | 否 | 是否启用，默认启用。<br> isEnabled为true时，表示为启用。<br> isEnabled为false时，表示为禁用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 72| action | () => void | 否 | 触发时的动作闭包。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 73 74## EditableTitleBarItem<sup>12+</sup> 75 76type EditableTitleBarItem = EditableTitleBarMenuItem 77 78**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82| 类型 | 说明 | 83| -------- | -------- | 84| [EditableTitleBarMenuItem](#editabletitlebarmenuitem) | 左侧头像的单个菜单类型。 | 85 86## EditableTitleBarOptions<sup>12+</sup> 87 88**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92| 名称 | 类型 | 必填 | 说明 | 93| -------- | -------- | -------- | -------- | 94| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 标题栏背景色。<br />默认值: '#00000000'| 95| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 标题栏背景模糊样式。<br />默认值: [BlurStyle.NONE]| 96| safeAreaTypes | Array <[SafeAreaType](ts-types.md#safeareatype10)> | 否 | 非必填，配置扩展安全区域的类型。<br />默认值: [SafeAreaType.SYSTEM] | 97| safeAreaEdges | Array <[SafeAreaEdge](ts-types.md#safeareaedge10)> | 否 | 非必填，配置扩展安全区域的方向。<br />默认值: [SafeAreaEdge.TOP] | 98 99## 事件 100不支持[通用事件](ts-universal-events-click.md) 101 102## 示例 103 104### 示例1（右侧图标自定义标题栏） 105该示例主要演示EditableTitleBar设置左侧图标、主标题及自定义右侧图标区的效果。 106 107```ts 108import { EditableLeftIconType, EditableTitleBar, promptAction } from '@kit.ArkUI'; 109 110@Entry 111@Component 112struct Index { 113 build() { 114 Row() { 115 Column() { 116 Divider().height(2).color(0xCCCCCC) 117 // 左侧取消按钮，右侧保存按钮。 118 EditableTitleBar({ 119 leftIconStyle: EditableLeftIconType.Cancel, 120 title: '编辑页面', 121 menuItems: [], 122 onCancel: () => { 123 promptAction.showToast({ message: 'on cancel' }); 124 }, 125 onSave: () => { 126 promptAction.showToast({ message: 'on save' }); 127 } 128 }) 129 Divider().height(2).color(0xCCCCCC) 130 // 左侧返回按钮，右侧自定义取消按钮（disabled）、保存按钮。 131 EditableTitleBar({ 132 leftIconStyle: EditableLeftIconType.Back, 133 title: '编辑页面', 134 menuItems: [ 135 { 136 value: $r('sys.media.ohos_ic_public_cancel'), 137 isEnabled: false, 138 action: () => { 139 promptAction.showToast({ message: 'show toast index 2' }); 140 } 141 } 142 ], 143 onSave: () => { 144 promptAction.showToast({ message: 'on save' }) 145 } 146 }) 147 Divider().height(2).color(0xCCCCCC) 148 }.width('100%') 149 }.height('100%') 150 } 151} 152``` 153 154 155 156### 示例2（头像与背景模糊标题栏） 157该示例主要演示EditableTitleBar设置背景模糊、头像；取消右侧保存图标及自定义标题栏外边距的效果。 158 159```ts 160import { EditableLeftIconType, EditableTitleBar, LengthMetrics, promptAction, router } from '@kit.ArkUI'; 161 162@Entry 163@Component 164struct Index { 165 @State titleBarMargin: LocalizedMargin = { 166 start: LengthMetrics.vp(35), 167 end: LengthMetrics.vp(35), 168 }; 169 170 build() { 171 Row() { 172 Column() { 173 EditableTitleBar({ 174 leftIconStyle: EditableLeftIconType.Cancel, 175 title: '主标题', 176 subtitle: '副标题', 177 // 设置背景模糊效果 178 options: { 179 backgroundBlurStyle: BlurStyle.COMPONENT_THICK, 180 }, 181 onSave: () => { 182 promptAction.showToast({ message: "on save" }); 183 }, 184 }) 185 Divider().height(2).color(0xCCCCCC); 186 EditableTitleBar({ 187 leftIconStyle: EditableLeftIconType.Cancel, 188 title: '主标题', 189 subtitle: '副标题', 190 // 取消右侧保存按钮 191 isSaveIconRequired: false, 192 }) 193 Divider().height(2).color(0xCCCCCC); 194 EditableTitleBar({ 195 leftIconStyle: EditableLeftIconType.Back, 196 title: '主标题', 197 subtitle: '副标题', 198 isSaveIconRequired: false, 199 onCancel: () => { 200 router.back(); 201 }, 202 }) 203 Divider().height(2).color(0xCCCCCC); 204 EditableTitleBar({ 205 leftIconStyle: EditableLeftIconType.Back, 206 title: '主标题', 207 subtitle: '副标题', 208 menuItems: [ 209 { 210 value: $r('sys.media.ohos_ic_public_remove'), 211 isEnabled: true, 212 action: () => { 213 promptAction.showToast({ message: "show toast index 1" }); 214 } 215 } 216 ], 217 isSaveIconRequired: false, 218 // 点击左侧Back图标，触发的动作。 219 onCancel: () => { 220 router.back(); 221 }, 222 }) 223 Divider().height(2).color(0xCCCCCC); 224 EditableTitleBar({ 225 leftIconStyle: EditableLeftIconType.Back, 226 title: '主标题', 227 subtitle: '副标题', 228 // 设置可点击头像 229 imageItem: { 230 value: $r('sys.media.ohos_ic_normal_white_grid_image'), 231 isEnabled: true, 232 action: () => { 233 promptAction.showToast({ message: "show toast index 2" }); 234 } 235 }, 236 // 设置标题栏外边距 237 contentMargin: this.titleBarMargin, 238 // 右侧图标配置 239 menuItems: [ 240 { 241 value: $r('sys.media.ohos_ic_public_remove'), 242 isEnabled: true, 243 action: () => { 244 promptAction.showToast({ message: "show toast index 3" }); 245 } 246 } 247 ], 248 onCancel: () => { 249 router.back(); 250 }, 251 }) 252 } 253 } 254 } 255} 256``` 257 258 259
