1# ToolBarV2 2 3工具栏用于展示针对当前界面内容的操作选项，在界面底部显示。底部最多显示5个入口，超过则收纳入“更多”子项中，在最右侧显示。<br /> 4该组件基于[状态管理V2](../../../ui/state-management/arkts-state-management-overview.md#状态管理v2)实现，相较于[状态管理V1](../../../ui/state-management/arkts-state-management-overview.md#状态管理v1)，状态管理V2增强了对数据对象的深度观察与管理能力，不再局限于组件层级。借助状态管理V2，开发者可以通过该组件更灵活地控制工具栏的数据和状态，实现更高效的用户界面刷新。<br> 5 6> **说明：** 7> 8> - 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9> 10> - 该组件不支持在Wearable设备上使用。 11 12 13## 导入模块 14 15```ts 16import { ToolBarV2 } from '@kit.ArkUI'; 17``` 18 19## 子组件 20 21无 22 23 24## ToolBarV2 25 26ToolbarV2({toolBarList: ToolBarV2Item\[], activatedIndex?: number, dividerModifier: DividerModifier, toolBarModifier: ToolBarV2Modifier}) 27 28工具栏。 29 30**装饰器类型：**@ComponentV2 31 32**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 37| -------------------- | ---------------------------------------------------------------- | -- |---------------------|--------------------------------------------------------------| 38| toolBarList | [ToolBarV2Item](#toolbarv2item)\[] | 是 | @Param<br/>@Require | 工具栏列表。 | 39| activatedIndex | number | 否 | @Param | 激活态的子项。<br ></div>默认值：-1，即无工具栏子项为激活态。<br />取值范围：[-1,4]。 | 40| dividerModifier<sup> | [DividerModifier](ts-universal-attributes-attribute-modifier.md) | 否 | @Param | 工具栏头部分割线属性，可设置分割线高度、颜色等。<br />默认不生效。 | 41| toolBarModifier<sup> | [ToolBarV2Modifier](#toolbarv2modifier) | 否 | @Param | 工具栏属性，可设置工具栏高度、背景色、内边距（仅在工具栏子项数量小于5时生效）、是否显示按压态。<br />默认不生效。 | 42 43## ToolBarV2Item 44定义工具栏子项。 45 46**装饰器类型：**@ObservedV2 47 48**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 49 50**系统能力：** SystemCapability.ArkUI.ArkUI.Full 51 52### 属性 53 54| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 55| ---------------------------- | ----------------------------------------------- | -- | :----- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 56| content | [ToolBarV2ItemText](#toolbarv2itemtext) | 是 | @Trace | 工具栏子项的文本。 | 57| action | [ToolBarV2ItemAction](#toolbarv2itemaction) | 否 | @Trace | 工具栏子项点击事件。 <br ></div>默认无点击事件。 | 58| icon | [ToolBarV2ItemIconType](#toolbarv2itemicontype) | 否 | @Trace | 工具栏子项的图标。<br ></div>默认不显示图标。 | 59| state | [ToolBarV2ItemState](#toolbarv2itemstate) | 否 | @Trace | 工具栏子项的状态。<br />默认为ENABLE。<br /> | 60| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | @Trace | 工具栏子项的无障碍文本属性。当组件不包含文本属性时，屏幕朗读选中此组件时不播报，使用者无法清楚地知道当前选中了什么组件。为了解决此场景，开发人员可为不包含文字信息的组件设置无障碍文本，当屏幕朗读选中此组件时播报无障碍文本的内容，帮助屏幕朗读的使用者清楚地知道自己选中了什么组件。<br ></div>默认值为当前项content属性内容。 | 61| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | 否 | @Trace | 工具栏子项的无障碍描述。此描述用于向用户详细解释当前组件，开发人员应为组件的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从组件的属性和无障碍文本中直接获知时。如果组件同时具备文本属性和无障碍说明属性，当组件被选中时，系统将首先播报组件的文本属性，随后播报无障碍说明属性的内容。<br />默认值：“单指双击即可执行”。 | 62| accessibilityLevel | string | 否 | @Trace | 工具栏子项无障碍重要性。用于控制当前项是否可被无障碍辅助服务所识别。<br ></div>支持的值为：<br />"auto"：当前组件会转换"yes"。<br />"yes"：当前组件可被无障碍辅助服务所识别。<br />"no"：当前组件不可被无障碍辅助服务所识别。<br />"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br />默认值："auto"。<br /> | 63 64### constructor 65 66constructor(options: ToolBarV2ItemOptions) 67 68ToolBarV2Item的构造函数。 69 70**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 71 72**系统能力：** SystemCapability.ArkUI.ArkUI.Full 73 74| 名称 | 类型 | 必填 | 说明 | 75| :------ |:----------------------------------------------| :- | :------- | 76| options | [ToolBarV2ItemOptions](#toolbarv2itemoptions) | 是 | 工具栏子项信息。 | 77 78## ToolBarV2ItemOptions 79 80用于构建ToolBarV2Item对象。 81 82**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 83 84**系统能力：** SystemCapability.ArkUI.ArkUI.Full 85 86| 名称 | 类型 | 必填 | 说明 | 87|:-------------------------| :---------------------------------------------- | :- |:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 88| content | [ToolBarV2ItemText](#toolbarv2itemtext) | 是 | 工具栏子项的文本。 | 89| action | [ToolBarV2ItemAction](#toolbarv2itemaction) | 否 | 工具栏子项点击事件。<br />默认无点击事件。 | 90| icon | [ToolBarV2ItemIconType](#toolbarv2itemicontype) | 否 | 工具栏子项的图标。<br />默认不显示图标。 | 91| state | [ToolBarV2ItemState](#toolbarv2itemstate) | 否 | 工具栏子项的状态。<br />默认为ENABLE。<br /> | 92| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | 工具栏子项的无障碍文本属性。当组件不包含文本属性时，屏幕朗读选中此组件时不播报，使用者无法清楚地知道当前选中了什么组件。为了解决此场景，开发人员可为不包含文字信息的组件设置无障碍文本，当屏幕朗读选中此组件时播报无障碍文本的内容，帮助屏幕朗读的使用者清楚地知道自己选中了什么组件。<br />默认值为当前项content属性内容。<br /> | 93| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | 否 | 工具栏子项的无障碍描述。此描述用于向用户详细解释当前组件，开发人员应为组件的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从组件的属性和无障碍文本中直接获知时。如果组件同时具备文本属性和无障碍说明属性，当组件被选中时，系统将首先播报组件的文本属性，随后播报无障碍说明属性的内容。<br />默认值为“单指双击即可执行”。 | 94| accessibilityLevel | string | 否 | 工具栏子项无障碍重要性。用于控制当前项是否可被无障碍辅助服务所识别。<br ></div>支持的值为：<br />"auto"：当前组件会转换"yes"。<br />"yes"：当前组件可被无障碍辅助服务所识别。<br />"no"：当前组件不可被无障碍辅助服务所识别。<br />"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br />默认值："auto"。<br /> | 95 96## ToolBarV2ItemAction 97 98type ToolBarV2ItemAction = (index: number) => void 99 100工具栏子项点击事件回调类型。 101 102**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 103 104**系统能力：** SystemCapability.ArkUI.ArkUI.Full 105 106**参数：** 107 108| 参数名 | 类型 | 必填 | 说明 | 109|:------|:-------|:---|----| 110| index | number | 是 |工具栏子项点击事件的回调。<br /> -index: 表示触发事件的工具栏子项索引。 | 111 112## ToolBarV2ItemText 113 114定义工具栏子项的文本。 115 116**装饰器类型：**@ObservedV2 117 118**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 119 120**系统能力：** SystemCapability.ArkUI.ArkUI.Full 121 122### 属性 123 124| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 125|:--------------------|:------------------------------------------------------------| :- | :----- |:---------------------------------------------------------| 126| text | [ResourceStr](ts-types.md#resourcestr) | 是 | @Trace | 工具栏子项的文本。 | 127| color | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Trace | 工具栏子项的文本的颜色。<br/>默认值：$r('sys.color.font_primary')。 | 128| activatedColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Trace | 工具栏子项在激活态下文本的颜色。<br></div>默认值：$r('sys.color.font_emphasize')。 | 129 130### constructor 131 132constructor(options: ToolBarV2ItemTextOptions) 133 134ToolBarV2ItemText的构造函数。 135 136**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 137 138**系统能力：** SystemCapability.ArkUI.ArkUI.Full 139 140| 名称 | 类型 | 必填 | 说明 | 141| :------ |:------------------------------------------------------| :- | :--------- | 142| options | [ToolBarV2ItemTextOptions](#toolbarv2itemtextoptions) | 是 | 工具栏子项文本信息。 | 143 144## ToolBarV2ItemTextOptions 145 146用于构建ToolBarV2ItemText对象。 147 148**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 149 150**系统能力：** SystemCapability.ArkUI.ArkUI.Full 151 152| 名称 | 类型 | 必填 | 说明 | 153| :------------------ |:------------------------------------------------------------| :- |:---------------------------------------------------------| 154| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 工具栏子项的文本。 | 155| color | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 工具栏子项的文本的颜色。<br/>默认值：$r('sys.color.font_primary')。 | 156| activatedColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 工具栏子项在激活态下文本的颜色。<br/>默认值：$r('sys.color.font_emphasize')。 | 157 158## ToolBarV2ItemImage 159 160定义工具栏子项的普通图标。 161 162**装饰器类型：**@ObservedV2 163 164**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 165 166**系统能力：** SystemCapability.ArkUI.ArkUI.Full 167 168### 属性 169 170| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 171|:-------------------|:------------------------------------------------------------| :- | :----- |:---------------------------------------------------------| 172| src | [ResourceStr](ts-types.md#resourcestr) | 是 | @Trace | 工具栏子项的文本。 | 173| color | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Trace | 工具栏子项的图标的颜色。<br/>默认值：$r('sys.color.icon_primary')。 | 174| activatedColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Trace | 工具栏子项在激活态下图标的颜色。<br/>默认值：$r('sys.color.icon_emphasize')。 | 175 176### constructor 177 178constructor(options: ToolBarV2ItemImageOptions) 179 180ToolBarV2ItemImage的构造函数。 181 182**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 183 184**系统能力：** SystemCapability.ArkUI.ArkUI.Full 185 186| 名称 | 类型 | 必填 | 说明 | 187| :------ | :------------------------------------------------------ | :- | :--------- | 188| options | [ToolBarV2ItemImageOptions](#toolbarv2itemimageoptions) | 是 | 工具栏子项图标信息。 | 189 190## ToolBarV2ItemImageOptions 191 192用于构建ToolBarV2ItemImage对象。 193 194**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 195 196**系统能力：** SystemCapability.ArkUI.ArkUI.Full 197 198| 名称 | 类型 | 必填 | 说明 | 199|:--------------------|:------------------------------------------------------------| :- |:---------------------------------------------------------| 200| src | [ResourceStr](ts-types.md#resourcestr) | 是 | 工具栏子项的文本。 | 201| color | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 工具栏子项的图标的颜色。<br/>默认值：$r('sys.color.icon_primary')。 | 202| activatedColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 工具栏子项在激活态下图标的颜色。<br/>默认值：$r('sys.color.icon_emphasize')。 | 203 204## ToolBarV2ItemIconType 205 206type ToolBarV2ItemIconType = ToolBarV2ItemImage | ToolBarV2SymbolGlyph 207 208工具栏子项图标内容的联合类型。 209 210**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 211 212**系统能力：** SystemCapability.ArkUI.ArkUI.Full 213 214| 类型 | 说明 | 215| :------------------- | :------------ | 216| ToolBarV2ItemImage | 用于定义普通图标。 | 217| ToolBarV2SymbolGlyph | 用于定义Symbol图标。 | 218 219## ToolBarV2Modifier 220 221ToolBarV2Modifier提供设置工具栏高度(height)、背景色(backgroundColor)、左右内边距（padding，仅在item小于5个时生效）、是否显示按压态（stateEffect）的方法。 222 223**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 224 225**系统能力：** SystemCapability.ArkUI.ArkUI.Full 226 227### backgroundColor 228 229backgroundColor(backgroundColor: ColorMetrics): ToolBarV2Modifier 230 231自定义绘制工具栏背景色的接口，若重载该方法则可进行工具栏背景色的自定义绘制。 232 233**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 234 235**系统能力：** SystemCapability.ArkUI.ArkUI.Full 236 237**参数：** 238 239| 参数名 | 类型 | 必填 | 说明 | 240| --------------- |-------------------------------------------------------------| -- | ----------------------------------------------------------------- | 241| backgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 是 | 工具栏背景色。<br />默认背景色为\$r('sys.color.ohos\_id\_color\_toolbar\_bg')。 | 242**返回值：** 243 244| 类型 | 说明 | 245|-----------------------------------------|-----------------------------------------| 246| [ToolBarV2Modifier](#toolbarv2modifier) | 设置backgroundColor后的ToolBarV2Modifier对象。 | 247 248### padding 249 250padding(padding: LengthMetrics): ToolBarV2Modifier 251 252自定义绘制工具栏左右内边距的接口，若重载该方法则可进行工具栏左右内边距的自定义绘制。 253 254**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 255 256**系统能力：** SystemCapability.ArkUI.ArkUI.Full 257 258**参数：** 259 260| 参数名 | 类型 | 必填 | 说明 | 261| ------- |---------------------------------------------------------------| -- | ------------------------------------------------------------------- | 262| padding | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是 | 工具栏左右内边距，仅在item小于5个时生效。<br ></div>工具栏默认在item小于5个时padding为24vp，大于等于5个时为0。 | 263 264**返回值：** 265 266| 类型 | 说明 | 267|-----------------------------------------|---------------------------------| 268| [ToolBarV2Modifier](#toolbarv2modifier) | 设置padding后的ToolBarV2Modifier对象。 | 269### height 270 271height(height: LengthMetrics): ToolBarV2Modifier 272 273自定义绘制工具栏高度的接口，若重载该方法则可进行工具栏高度的自定义绘制，此高度不包含分割线高度。 274 275**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 276 277**系统能力：** SystemCapability.ArkUI.ArkUI.Full 278 279**参数：** 280 281| 参数名 | 类型 | 必填 | 说明 | 282| ------ | ------------------------------------------------------------------ | -- | --------------------------------- | 283| height | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是 | 工具栏高度。<br />工具栏高度默认为56vp（不包含分割线）。 | 284 285**返回值：** 286 287| 类型 | 说明 | 288|-----------------------------------------|--------------------------------| 289| [ToolBarV2Modifier](#toolbarv2modifier) | 设置height后的ToolBarV2Modifier对象。 | 290 291### stateEffect 292 293stateEffect(stateEffect: boolean): ToolBarV2Modifier 294 295设置是否显示按压态效果的接口。 296 297**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 298 299**系统能力：** SystemCapability.ArkUI.ArkUI.Full 300 301**参数：** 302 303| 参数名 | 类型 | 必填 | 说明 | 304| ----------- | ------- | -- |--------------------------------------------------------| 305| stateEffect | boolean | 是 | 工具栏是否显示按压态效果。<br />true为显示按压态效果，false为移除按压态效果。默认为true。 | 306 307**返回值：** 308 309| 类型 | 说明 | 310|-----------------------------------------|-------------------------------------| 311| [ToolBarV2Modifier](#toolbarv2modifier) | 设置stateEffect后的ToolBarV2Modifier对象。 | 312 313## ToolBarV2ItemState 314 315工具栏子项状态枚举。 316 317**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 318 319**系统能力：** SystemCapability.ArkUI.ArkUI.Full 320 321| 名称 | 值 | 说明 | 322| -------- | - | --------------- | 323| ENABLE | 1 | 工具栏子项为正常可点击状态。 | 324| DISABLE | 2 | 工具栏子项为不可点击状态。 | 325| ACTIVATE | 3 | 工具栏子项为激活状态，可点击。 | 326 327## ToolBarV2SymbolGlyph 328 329ToolBarV2SymbolGlyph定义Symbol图标的属性。 330 331**装饰器类型**：@ObservedV2 332 333**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 334 335**系统能力：** SystemCapability.ArkUI.ArkUI.Full 336 337### 属性 338 339| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 340| :-------- | :------------------------------------------------------------------- | :- | :----- | :----------------------------------------------------------------------------------- | 341| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 是 | @Trace | 工具栏symbol图标普通态样式。 | 342| activated | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | @Trace | 工具栏symbol图标激活态样式。<br />默认值：fontColor：\$r('sys.color.icon\_emphasize')，fontSize：24vp。 | 343 344### constructor 345 346constructor(options: ToolBarV2SymbolGlyphOptions) 347 348ToolBarV2SymbolGlyph的构造函数。 349 350**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 351 352**系统能力：** SystemCapability.ArkUI.ArkUI.Full 353 354| 参数名 | 类型 | 必填 | 说明 | 355| :------ | :---------------------------------------------------------- | :- | :---------- | 356| options | [ToolBarV2SymbolGlyphOptions](#toolbarv2symbolglyphoptions) | 是 | Symbol图标信息。 | 357 358## ToolBarV2SymbolGlyphOptions 359 360ToolBarV2SymbolGlyphOptions定义图标的属性。 361 362**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 363 364**系统能力：** SystemCapability.ArkUI.ArkUI.Full 365 366| 名称 | 类型 | 必填 | 说明 | 367| --------- | -------------------------------------------------------------------- | -- | ------------------------------------------------------------------------------------ | 368| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 是 | 工具栏symbol图标普通态样式。 | 369| activated | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 工具栏symbol图标激活态样式。<br />默认值：fontColor：\$r('sys.color.icon\_emphasize')，fontSize：24vp。 | 370 371## 示例 372 373### 示例1（工具栏不同状态的默认效果） 374 375该示例展示了工具栏子项state属性分别设置ENABLE、DISABLE、ACTIVATE状态的不同显示效果。 376 377```ts 378import { ToolBarV2ItemImage, ToolBarV2ItemState, ToolBarV2ItemText, ToolBarV2Item, ToolBarV2 } from '@kit.ArkUI'; 379 380@Entry 381@ComponentV2 382struct Index { 383 @Local toolbarList: ToolBarV2Item[] = [] 384 385 aboutToAppear() { 386 this.toolbarList.push(new ToolBarV2Item({ 387 content: new ToolBarV2ItemText( 388 { 389 text: '剪贴我是超超超超超超超超超长样式' 390 } 391 ), 392 icon: new ToolBarV2ItemImage({ 393 src: $r('sys.media.ohos_ic_public_share') 394 }), 395 action: () => { 396 }, 397 })) 398 this.toolbarList.push( 399 new ToolBarV2Item({ 400 content: new ToolBarV2ItemText( 401 { 402 text: '拷贝' 403 } 404 ), 405 icon: new ToolBarV2ItemImage({ 406 src: $r('sys.media.ohos_ic_public_copy') 407 }), 408 action: () => { 409 }, 410 state: ToolBarV2ItemState.DISABLE 411 }) 412 ) 413 this.toolbarList.push( 414 new ToolBarV2Item({ 415 content: new ToolBarV2ItemText( 416 { 417 text: '粘贴' 418 } 419 ), 420 icon: new ToolBarV2ItemImage({ 421 src: $r('sys.media.ohos_ic_public_paste') 422 }), 423 action: () => { 424 }, 425 state: ToolBarV2ItemState.ACTIVATE 426 }) 427 ) 428 this.toolbarList.push( 429 new ToolBarV2Item({ 430 content: new ToolBarV2ItemText( 431 { 432 text: '全选' 433 } 434 ), 435 icon: new ToolBarV2ItemImage({ 436 src: $r('sys.media.ohos_ic_public_select_all') 437 }), 438 action: () => { 439 }, 440 }) 441 ) 442 this.toolbarList.push( 443 new ToolBarV2Item({ 444 content: new ToolBarV2ItemText( 445 { 446 text: '分享' 447 } 448 ), 449 icon: new ToolBarV2ItemImage({ 450 src: $r('sys.media.ohos_ic_public_share') 451 }), 452 action: () => { 453 }, 454 }) 455 ) 456 this.toolbarList.push( 457 new ToolBarV2Item({ 458 content: new ToolBarV2ItemText( 459 { 460 text: '分享' 461 } 462 ), 463 icon: new ToolBarV2ItemImage({ 464 src: $r('sys.media.ohos_ic_public_share') 465 }), 466 action: () => { 467 }, 468 }) 469 ) 470 } 471 472 build() { 473 Row() { 474 Stack() { 475 Column() { 476 ToolBarV2({ 477 activatedIndex: 2, 478 toolBarList: this.toolbarList, 479 }) 480 } 481 }.align(Alignment.Bottom) 482 .width('100%').height('100%') 483 } 484 } 485} 486``` 487 488 489 490### 示例2（设置工具栏自定义样式） 491 492该示例通过设置属性ToolBarV2Modifier自定义工具栏高度、背景色、按压效果等样式。 493 494```ts 495import { 496 SymbolGlyphModifier, 497 DividerModifier, 498 LengthMetrics, 499 ColorMetrics, 500 ToolBarV2Item, 501 ToolBarV2Modifier, 502 ToolBarV2ItemText, 503 ToolBarV2ItemImage, 504 ToolBarV2, 505 ToolBarV2ItemState, 506 ToolBarV2SymbolGlyph 507} from '@kit.ArkUI'; 508 509@Entry 510@ComponentV2 511struct Index { 512 @Local toolbarList: ToolBarV2Item[] = []; 513 private toolBarModifier: ToolBarV2Modifier = 514 new ToolBarV2Modifier().height(LengthMetrics.vp(52)) 515 .backgroundColor(ColorMetrics.resourceColor(Color.Transparent)) 516 .stateEffect(false); 517 @Local dividerModifier: DividerModifier = new DividerModifier().height(0); 518 519 aboutToAppear() { 520 this.toolbarList.push( 521 new ToolBarV2Item({ 522 content: new ToolBarV2ItemText({ 523 text: 'Long long long long long long long long text', 524 activatedColor: ColorMetrics.resourceColor($r('sys.color.font_primary')) 525 }), 526 icon: new ToolBarV2SymbolGlyph({ 527 normal: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Green]), 528 activated: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]), 529 }), 530 action: () => { 531 }, 532 state: ToolBarV2ItemState.ACTIVATE, 533 }) 534 ) 535 this.toolbarList.push( 536 new ToolBarV2Item({ 537 content: new ToolBarV2ItemText({ 538 text: 'Copy', 539 activatedColor: ColorMetrics.resourceColor('#ffec5d5d') 540 }), 541 icon: new ToolBarV2ItemImage({ 542 src: $r('sys.media.ohos_ic_public_copy'), 543 color: ColorMetrics.resourceColor('#ff18cb53'), 544 activatedColor: ColorMetrics.resourceColor('#ffec5d5d'), 545 }), 546 action: () => { 547 }, 548 state: ToolBarV2ItemState.DISABLE, 549 })) 550 this.toolbarList.push( 551 new ToolBarV2Item({ 552 content: new ToolBarV2ItemText({ 553 text: 'Paste', 554 color: ColorMetrics.resourceColor('#ff18cb53') 555 }), 556 icon: new ToolBarV2ItemImage({ 557 src: $r('sys.media.ohos_ic_public_paste'), 558 }), 559 action: () => { 560 }, 561 state: ToolBarV2ItemState.ACTIVATE, 562 }) 563 ) 564 this.toolbarList.push( 565 new ToolBarV2Item({ 566 content: new ToolBarV2ItemText({ 567 text: 'All', 568 }), 569 icon: new ToolBarV2ItemImage({ 570 src: $r('sys.media.ohos_ic_public_select_all'), 571 }), 572 action: () => { 573 }, 574 state: ToolBarV2ItemState.ACTIVATE, 575 })) 576 this.toolbarList.push( 577 new ToolBarV2Item({ 578 content: new ToolBarV2ItemText({ 579 text: '分享', 580 }), 581 icon: new ToolBarV2ItemImage({ 582 src: $r('sys.media.ohos_ic_public_share'), 583 }), 584 action: () => { 585 }, 586 })) 587 this.toolbarList.push( 588 new ToolBarV2Item({ 589 content: new ToolBarV2ItemText({ 590 text: '分享', 591 }), 592 icon: new ToolBarV2ItemImage({ 593 src: $r('sys.media.ohos_ic_public_share'), 594 }), 595 action: () => { 596 }, 597 }) 598 ) 599 } 600 601 build() { 602 Row() { 603 Stack() { 604 Column() { 605 ToolBarV2({ 606 toolBarModifier: this.toolBarModifier, 607 dividerModifier: this.dividerModifier, 608 activatedIndex: 0, 609 toolBarList: this.toolbarList, 610 }) 611 .height(52) 612 } 613 }.align(Alignment.Bottom) 614 .width('100%').height('100%') 615 } 616 } 617} 618``` 619 620 621 622### 示例3（设置工具栏自定义播报） 623 624该示例通过设置工具栏子项属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。 625 626```ts 627import { 628 DividerModifier, 629 LengthMetrics, 630 ColorMetrics, 631 ToolBarV2Item, 632 ToolBarV2Modifier, 633 ToolBarV2ItemText, 634 ToolBarV2ItemImage, 635 ToolBarV2, 636 ToolBarV2ItemState, 637} from '@kit.ArkUI'; 638 639@Entry 640@ComponentV2 641struct Index { 642 @Local toolbarList: ToolBarV2Item[] = []; 643 private toolBarModifier: ToolBarV2Modifier = 644 new ToolBarV2Modifier().height(LengthMetrics.vp(52)) 645 .backgroundColor(ColorMetrics.resourceColor(Color.Transparent)) 646 .stateEffect(false); 647 @Local dividerModifier: DividerModifier = new DividerModifier().height(0); 648 649 aboutToAppear() { 650 this.toolbarList.push( 651 new ToolBarV2Item({ 652 content: new ToolBarV2ItemText({ 653 text: '剪贴我是超超超超超超超超超长样式', 654 }), 655 icon: new ToolBarV2ItemImage({ 656 src: $r('sys.media.ohos_ic_public_share') 657 }), 658 action: () => { 659 }, 660 accessibilityText: '剪贴', //该项屏幕朗读播报文本为‘剪贴’ 661 accessibilityDescription: '单指双击即可剪贴', //该项屏幕朗读播报描述为'单指双击即可剪贴' 662 accessibilityLevel: 'yes' //该项可被无障碍屏幕朗读聚焦 663 }) 664 ) 665 this.toolbarList.push( 666 new ToolBarV2Item({ 667 content: new ToolBarV2ItemText({ 668 text: '拷贝', 669 }), 670 icon: new ToolBarV2ItemImage({ 671 src: $r('sys.media.ohos_ic_public_copy'), 672 }), 673 action: () => { 674 }, 675 state: ToolBarV2ItemState.DISABLE, 676 accessibilityLevel: 'no' //该项将无法被屏幕朗读服务所识别，屏幕朗读不可聚焦 677 })) 678 this.toolbarList.push( 679 new ToolBarV2Item({ 680 content: new ToolBarV2ItemText({ 681 text: '粘贴', 682 }), 683 icon: new ToolBarV2ItemImage({ 684 src: $r('sys.media.ohos_ic_public_paste'), 685 }), 686 action: () => { 687 }, 688 state: ToolBarV2ItemState.ACTIVATE, 689 }) 690 ) 691 this.toolbarList.push( 692 new ToolBarV2Item({ 693 content: new ToolBarV2ItemText({ 694 text: '全选', 695 }), 696 icon: new ToolBarV2ItemImage({ 697 src: $r('sys.media.ohos_ic_public_select_all'), 698 }), 699 action: () => { 700 }, 701 })) 702 this.toolbarList.push( 703 new ToolBarV2Item({ 704 content: new ToolBarV2ItemText({ 705 text: '分享', 706 }), 707 icon: new ToolBarV2ItemImage({ 708 src: $r('sys.media.ohos_ic_public_share'), 709 }), 710 action: () => { 711 }, 712 })) 713 this.toolbarList.push( 714 new ToolBarV2Item({ 715 content: new ToolBarV2ItemText({ 716 text: '分享', 717 }), 718 icon: new ToolBarV2ItemImage({ 719 src: $r('sys.media.ohos_ic_public_share'), 720 }), 721 action: () => { 722 }, 723 }) 724 ) 725 } 726 727 build() { 728 Row() { 729 Stack() { 730 Column() { 731 ToolBarV2({ 732 toolBarModifier: this.toolBarModifier, 733 dividerModifier: this.dividerModifier, 734 activatedIndex: 0, 735 toolBarList: this.toolbarList, 736 }) 737 .height(52) 738 } 739 }.align(Alignment.Bottom) 740 .width('100%').height('100%') 741 } 742 } 743} 744``` 745 746 747
