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 />safeAreaType: [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 106```ts 107// 该示例主要演示EditableTitleBar设置左侧图标、主标题及自定义右侧图标区的效果。 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 EditableTitleBar({ 118 leftIconStyle: EditableLeftIconType.Cancel, 119 title: '编辑页面', 120 menuItems: [], 121 onCancel: () => { 122 promptAction.showToast({ message: 'on cancel' }); 123 }, 124 onSave: () => { 125 promptAction.showToast({ message: 'on save' }); 126 } 127 }) 128 Divider().height(2).color(0xCCCCCC) 129 EditableTitleBar({ 130 leftIconStyle: EditableLeftIconType.Back, 131 title: '编辑页面', 132 menuItems: [ 133 { 134 value: $r('app.media.ic_public_reduce'), 135 isEnabled: false, 136 action: () => { 137 promptAction.showToast({ message: 'show toast index 2' }); 138 } 139 } 140 ], 141 onSave: () => { 142 promptAction.showToast({ message: 'on save' }) 143 } 144 }) 145 Divider().height(2).color(0xCCCCCC) 146 }.width('100%') 147 }.height('100%') 148 } 149} 150``` 151 152 153 154### 示例2 155 156```ts 157// 该示例主要演示EditableTitleBar设置背景模糊、头像；取消右侧保存图标及自定义标题栏外边距的效果。 158import { EditableLeftIconType, EditableTitleBar, LengthMetrics, promptAction, router } from '@kit.ArkUI'; 159 160@Entry 161@Component 162struct Index { 163 @State titlebarMargin: LocalizedMargin = { 164 start: LengthMetrics.vp(35), 165 end: LengthMetrics.vp(35), 166 }; 167 168 build() { 169 Row() { 170 Column() { 171 EditableTitleBar({ 172 leftIconStyle: EditableLeftIconType.Cancel, 173 title: '主标题', 174 subtitle: '副标题', 175 // 设置背景模糊效果 176 options: { 177 backgroundBlurStyle: BlurStyle.COMPONENT_THICK, 178 }, 179 onSave: () => { 180 promptAction.showToast({ message: "on save" }); 181 }, 182 }) 183 184 Divider().height(2).color(0xCCCCCC); 185 186 EditableTitleBar({ 187 leftIconStyle: EditableLeftIconType.Cancel, 188 title: '主标题', 189 subtitle: '副标题', 190 // 取消右侧保存按钮 191 isSaveIconRequired: false, 192 }) 193 194 Divider().height(2).color(0xCCCCCC); 195 196 EditableTitleBar({ 197 leftIconStyle: EditableLeftIconType.Back, 198 title: '主标题', 199 subtitle: '副标题', 200 isSaveIconRequired: false, 201 onCancel: () => { 202 router.back(); 203 }, 204 }) 205 206 Divider().height(2).color(0xCCCCCC); 207 208 EditableTitleBar({ 209 leftIconStyle: EditableLeftIconType.Back, 210 title: '主标题', 211 subtitle: '副标题', 212 menuItems: [ 213 { 214 value: $r('sys.media.ohos_ic_public_remove'), 215 isEnabled: true, 216 action: () => { 217 promptAction.showToast({ message: "show toast index 1" }); 218 } 219 } 220 ], 221 isSaveIconRequired: false, 222 // 点击左侧Back图标，触发的动作。 223 onCancel: () => { 224 router.back(); 225 }, 226 }) 227 228 Divider().height(2).color(0xCCCCCC); 229 230 EditableTitleBar({ 231 leftIconStyle: EditableLeftIconType.Back, 232 title: '主标题', 233 subtitle: '副标题', 234 // 设置可点击头像 235 imageItem: { 236 value: $r('app.media.img'), 237 isEnabled: true, 238 action: () => { 239 promptAction.showToast({ message: "show toast index 2" }); 240 } 241 }, 242 // 设置标题栏外边距 243 contentMargin: this.titlebarMargin, 244 // 右侧图标配置 245 menuItems: [ 246 { 247 value: $r('sys.media.ohos_ic_public_remove'), 248 isEnabled: true, 249 action: () => { 250 promptAction.showToast({ message: "show toast index 3" }); 251 } 252 } 253 ], 254 onCancel: () => { 255 router.back(); 256 }, 257 }) 258 } 259 } 260 } 261} 262``` 263 264 265
