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