1# ToolBar 2 3 4工具栏用于展示针对当前界面内容的操作选项，在界面底部显示。底部最多显示5个入口，超过则收纳入“更多”子项中，在最右侧显示。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14```ts 15import { SymbolGlyphModifier, DividerModifier, ToolBar, ToolBarOptions, ToolBarModifier, ItemState, LengthMetrics } from '@kit.ArkUI'; 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24不支持[通用属性](ts-component-general-attributes.md)。 25 26## ToolBar 27 28Toolbar({toolBarList: ToolBarOptions, activateIndex?: number, controller: TabsController, dividerModifier?: DividerModifier, toolBarModifier?: ToolBarModifier}) 29 30**装饰器类型：**\@Component 31 32**系统能力：** SystemCapability.ArkUI.ArkUI.Full 33 34| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 35| ----------------------------- | ------------------------------------------------------------ | ---- | ----------- |------------------------------------------------------------------------------------------------------| 36| toolBarList | [ToolBarOptions](#toolbaroptions) | 是 | @ObjectLink | 工具栏列表。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 37| activateIndex | number | 否 | @Prop | 激活态的子项。<br/>取值范围：大于等于-1。<br/>默认值：-1，没有激活态的子项。若设置数值小于-1，按没有激活项处理。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 38| controller | [TabsController](ts-container-tabs.md#tabscontroller) | 是 | - | 工具栏控制器，不支持控制工具栏子项。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 39| dividerModifier<sup>13+</sup> | [DividerModifier](ts-universal-attributes-attribute-modifier.md) | 否 | @Prop | 工具栏头部分割线属性，可设置分割线高度、颜色等。<br/>默认值：系统默认值。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 40| toolBarModifier<sup>13+</sup> | [ToolBarModifier](#toolbarmodifier13) | 否 | @Prop | 工具栏属性，可设置工具栏高度、背景色、内边距（仅在工具栏子项数量小于5时生效）、是否显示按压态。<br/>默认值：<br/>工具栏高度：56vp。<br/>背景色：ohos_id_toolbar_bg。<br/>内边距：24vp。<br/>显示按压态。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 41 42## ToolBarOptions 43 44继承于 Array<[ToolBarOption](#toolbaroption)>。 45 46**装饰器类型：**\@Observed 47 48**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 49 50**系统能力：** SystemCapability.ArkUI.ArkUI.Full 51 52## ToolBarOption 53 54**装饰器类型：**\@Observed 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58| 名称 | 类型 | 必填 | 说明 | 59|------------------------------------|-----------------------------------------------------------| -------- |--------------------------------------------------------------------------------------------------------------| 60| content | [ResourceStr](ts-types.md#resourcestr) | 是 | 工具栏子项的文本。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 61| action | () => void | 否 | 工具栏子项点击事件。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 62| icon | [Resource](ts-types.md#resource) | 否 | 工具栏子项的图标。<br/>toolBarSymbolOptions有传入参数时，icon不生效。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 63| state | [ItemState](#itemstate) | 否 | 工具栏子项的状态。<br/>默认为ENABLE。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 64| iconColor<sup>13+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 工具栏子项的图标填充颜色。<br/>默认值为$r('sys.color.icon_primary')。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 65| activatedIconColor<sup>13+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 工具栏子项激活态的图标填充颜色。<br/>默认值为$r('sys.color.icon_emphasize')。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 66| textColor<sup>13+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 工具栏子项的文本颜色。<br/>默认值为$r('sys.color.font_primary')。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 67| activatedTextColor<sup>13+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 工具栏子项激活态的文本颜色。<br/>默认值为$r('sys.color.font_emphasize')。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 68| toolBarSymbolOptions<sup>13+</sup> | [ToolBarSymbolGlyphOptions](#toolbarsymbolglyphoptions13) | 否 | 工具栏子项的图标属性，symbol类型。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 69 70## ToolBarModifier<sup>13+</sup> 71ToolBarModifier提供设置工具栏高度(height)、背景色(backgroundColor)、左右内边距（padding，仅在item小于5个时生效）、是否显示按压态（stateEffect）的方法。 72 73**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 74 75### backgroundColor 76 77backgroundColor(backgroundColor: ResourceColor): ToolBarModifier 78 79自定义绘制工具栏背景色的接口，若重载该方法则可进行工具栏背景色的自定义绘制。 80 81**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 82 83**系统能力：** SystemCapability.ArkUI.ArkUI.Full 84 85**参数：** 86 87| 参数名 | 类型 | 必填 | 说明 | 88| ------- | ------------------------------------------------------ | ---- |------------------------------------------------------------------| 89| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 是 | 工具栏背景色。<br/>默认背景色为$r('sys.color.ohos_id_color_toolbar_bg')。 | 90 91### padding 92 93padding(padding: LengthMetrics): ToolBarModifier 94 95自定义绘制工具栏左右内边距的接口，若重载该方法则可进行工具栏左右内边距的自定义绘制。 96 97**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 98 99**系统能力：** SystemCapability.ArkUI.ArkUI.Full 100 101**参数：** 102 103| 参数名 | 类型 | 必填 | 说明 | 104| ------- |--------| ---- |-------------------------------------------------------------------------------------| 105| padding | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | 是 | 工具栏左右内边距，仅在item小于5个时生效。<br/>工具栏默认在item小于5个时padding为24vp，大于等于5个时为0。 | 106 107### height 108 109height(height: LengthMetrics): ToolBarModifier 110 111自定义绘制工具栏高度的接口，若重载该方法则可进行工具栏高度的自定义绘制，此高度不包含分割线高度。 112 113**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Full 116 117**参数：** 118 119| 参数名 | 类型 | 必填 | 说明 | 120| ------- |---------------------------------| ---- |------------------------------------| 121| height | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | 是 | 工具栏高度。<br/>工具栏高度默认为56vp（不包含分割线）。 | 122 123### stateEffect 124 125stateEffect(stateEffect: boolean): ToolBarModifier 126 127设置是否显示按压态效果的接口。 128 129**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 130 131**系统能力：** SystemCapability.ArkUI.ArkUI.Full 132 133**参数：** 134 135| 参数名 | 类型 | 必填 | 说明 | 136| ------- |--------------------------------| ---- |----------------------------------------------------------| 137| stateEffect | boolean | 是 | 工具栏是否显示按压态效果。<br/>true为显示按压态效果，false为移除按压态效果，默认为true。 | 138 139## ItemState 140 141**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 142 143**系统能力：** SystemCapability.ArkUI.ArkUI.Full 144 145| 名称 | 值 | 说明 | 146| -------- | -------- | -------- | 147| ENABLE | 1 | 工具栏子项为正常可点击状态。 | 148| DISABLE | 2 | 工具栏子项为不可点击状态。 | 149| ACTIVATE | 3 | 工具栏子项为激活状态，可点击。 | 150 151## ToolBarSymbolGlyphOptions<sup>13+</sup> 152 153ToolBarSymbolGlyphOptions定义图标的属性。 154 155**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 156 157**系统能力：** SystemCapability.ArkUI.ArkUI.Full 158 159| 名称 | 类型 | 必填 | 说明 | 160| ------ | ---------- | ---- |------------------------------------------------------------------------------------------| 161| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 工具栏symbol图标普通态样式。<br/>默认值：fontColor：$r('sys.color.icon_primary')，fontSize：24vp。 | 162| activated| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 工具栏symbol图标激活态样式。<br/>默认值：fontColor：$r('sys.color.icon_emphasize')，fontSize：24vp。 | 163 164## 事件 165不支持[通用事件](ts-component-general-events.md)。 166 167## 示例 168 169### 示例1（工具栏不同状态的默认效果） 170该示例展示了工具栏子项state属性分别设置ENABLE、DISABLE、ACTIVATE状态的不同显示效果。 171```ts 172import { ToolBar, ToolBarOptions, ItemState } from '@kit.ArkUI'; 173 174@Entry 175@Component 176struct Index { 177 @State toolbarList: ToolBarOptions = new ToolBarOptions(); 178 179 aboutToAppear() { 180 this.toolbarList.push({ 181 content: '剪贴我是超超超超超超超超超长样式', 182 icon: $r('sys.media.ohos_ic_public_share'), 183 action: () => { 184 }, 185 }) 186 this.toolbarList.push({ 187 content: '拷贝', 188 icon: $r('sys.media.ohos_ic_public_copy'), 189 action: () => { 190 }, 191 state: ItemState.DISABLE 192 }) 193 this.toolbarList.push({ 194 content: '粘贴', 195 icon: $r('sys.media.ohos_ic_public_paste'), 196 action: () => { 197 }, 198 state: ItemState.ACTIVATE 199 }) 200 this.toolbarList.push({ 201 content: '全选', 202 icon: $r('sys.media.ohos_ic_public_select_all'), 203 action: () => { 204 }, 205 }) 206 this.toolbarList.push({ 207 content: '分享', 208 icon: $r('sys.media.ohos_ic_public_share'), 209 action: () => { 210 }, 211 }) 212 this.toolbarList.push({ 213 content: '分享', 214 icon: $r('sys.media.ohos_ic_public_share'), 215 action: () => { 216 }, 217 }) 218 } 219 220 build() { 221 Row() { 222 Stack() { 223 Column() { 224 ToolBar({ 225 activateIndex: 2, 226 toolBarList: this.toolbarList, 227 }) 228 } 229 } 230 .align(Alignment.Bottom) 231 .width('100%') 232 .height('100%') 233 } 234 } 235} 236``` 237 238 239 240### 示例2（设置工具栏自定义样式） 241该示例通过设置属性ToolBarModifier自定义工具栏高度、背景色、按压效果等样式。 242```ts 243import { 244 SymbolGlyphModifier, 245 DividerModifier, 246 ToolBar, 247 ToolBarOptions, 248 ToolBarModifier, 249 ItemState, 250 LengthMetrics, 251} from '@kit.ArkUI'; 252 253@Entry 254@Component 255struct Index { 256 @State toolbarList: ToolBarOptions = new ToolBarOptions(); 257 // 自定义工具栏样式 258 private toolBarModifier: ToolBarModifier = 259 new ToolBarModifier().height(LengthMetrics.vp(52)).backgroundColor(Color.Transparent).stateEffect(false); 260 @State dividerModifier: DividerModifier = new DividerModifier().height(0); 261 262 aboutToAppear() { 263 // 添加工具栏子项 264 this.toolbarList.push({ 265 content: 'Long long long long long long long long text', 266 icon: $r('sys.media.ohos_ic_public_share'), 267 action: () => { 268 }, 269 state: ItemState.ACTIVATE, 270 toolBarSymbolOptions: { 271 normal: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Green]), // 普通态symbol图标 272 activated: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]), // 激活态symbol图标 273 }, 274 activatedTextColor: $r('sys.color.font_primary'), 275 }) 276 this.toolbarList.push({ 277 content: 'Copy', 278 icon: $r('sys.media.ohos_ic_public_copy'), 279 action: () => { 280 }, 281 state: ItemState.DISABLE, 282 iconColor: '#ff18cb53', 283 activatedIconColor: '#ffec5d5d', // 激活态icon颜色 284 activatedTextColor: '#ffec5d5d', // 激活态文本颜色 285 }) 286 this.toolbarList.push({ 287 content: 'Paste', 288 icon: $r('sys.media.ohos_ic_public_paste'), 289 action: () => { 290 }, 291 state: ItemState.ACTIVATE, 292 textColor: '#ff18cb53', 293 }) 294 this.toolbarList.push({ 295 content: 'All', 296 icon: $r('sys.media.ohos_ic_public_select_all'), 297 action: () => { 298 }, 299 state: ItemState.ACTIVATE, 300 }) 301 this.toolbarList.push({ 302 content: '分享', 303 icon: $r('sys.media.ohos_ic_public_share'), 304 action: () => { 305 }, 306 }) 307 this.toolbarList.push({ 308 content: '分享', 309 icon: $r('sys.media.ohos_ic_public_share'), 310 action: () => { 311 }, 312 }) 313 } 314 315 build() { 316 Row() { 317 Stack() { 318 Column() { 319 ToolBar({ 320 toolBarModifier: this.toolBarModifier, 321 dividerModifier: this.dividerModifier, 322 activateIndex: 0, 323 toolBarList: this.toolbarList, 324 }) 325 .height(52) 326 } 327 } 328 .align(Alignment.Bottom) 329 .width('100%') 330 .height('100%') 331 } 332 } 333} 334``` 335 336 337
