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