1# ToolBar
2
3
4工具栏用于展示针对当前界面内容的操作选项，在界面底部显示。底部最多显示5个入口，超过则收纳入“更多”子项中，在最右侧显示。
5
6
7> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
8> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
9
10
11## 导入模块
12
13```
14import { ToolBar, ToolBarOptions } from '@ohos.arkui.advanced.ToolBar'
15```
16
17
18## 子组件
19
20无
21
22
23## 接口
24
25Toolbar({toolBarList: ToolBarOptions, activateIndex?: number, controller: TabsController})
26
27**装饰器类型：**\@Component
28
29**系统能力：** SystemCapability.ArkUI.ArkUI.Full
30
31**参数：**
32
33| 参数名 | 参数类型 | 必选 | 参数描述 |
34| -------- | -------- | -------- | -------- |
35| toolBarList | [ToolBarOptions](#toolbaroptions) | 是 | 工具栏列表。 |
36| activateIndex | number | 否 | 激活态的子项。<br/>默认值为-1。 |
37| controller | [TabsController](https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md/#Tabscontroller) | 是 | 筛选器的样式类型。 |
38
39
40## ToolBarOptions
41
42继承自Array&lt;ToolBarOption&gt;
43
44**ToolBarOption：**
45
46| 名称 | 值 | 是否必填 | 描述 |
47| -------- | -------- | -------- | -------- |
48| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 工具栏子项的文本。 |
49| action | void | 否 | 工具栏子项点击事件。 |
50| icon | [Resource](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resource) | 否 | 工具栏子项的图标。 |
51| state | [ItemState](#itemstate) | 否 | 工具栏子项的状态，默认为ENABLE。 |
52
53
54## ItemState
55
56| 名称 | 描述 |
57| -------- | -------- |
58| ENABLE | 工具栏子项为正常可点击状态。 |
59| DISABLE | 工具栏子项为不可点击状态。 |
60| ACTIVATE | 工具栏子项为激活状态，可点击。 |
61
62
63## 示例
64
65```
66import { ToolBar, ToolBarOptions } from '@ohos.arkui.advanced.ToolBar'
67@Entry
68@Component
69struct Index {
70  @State toolbarList: ToolBarOptions = new ToolBarOptions()
71    aboutToAppear() {
72    this.toolbarList.push({ text: '剪贴我是超超超超超超超超超长样式',
73      icon: $r('sys.media.ohos_ic_public_share'),
74      action: () => {
75      },
76    })
77    this.toolbarList.push({ text: '拷贝',
78      icon: $r('sys.media.ohos_ic_public_copy'),
79      action: () => {
80      },
81      state:2
82    })
83    this.toolbarList.push({ text: '粘贴',
84      icon: $r('sys.media.ohos_ic_public_paste'),
85      action: () => {
86      },
87      state:3
88    })
89    this.toolbarList.push({ text: '全选',
90      icon: $r('sys.media.ohos_ic_public_select_all'),
91      action: () => {
92      },
93    })
94    this.toolbarList.push({ text: '分享',
95      icon: $r('sys.media.ohos_ic_public_share'),
96      action: () => {
97      },
98    })
99    this.toolbarList.push({ text: '分享',
100      icon: $r('sys.media.ohos_ic_public_share'),
101      action: () => {
102      },
103    })
104  }
105  build() {
106    Row() {
107      Stack() {
108        Column(){
109          Button("修改减少item")
110            .width(96)
111            .height(40)
112            .onClick(() => {
113              this.toolbarList.pop()
114            })
115          Button("修改增加item")
116            .width(96)
117            .height(40)
118            .onClick(() => {
119              this.toolbarList.push(this.toolbarList[1])
120            })
121        }.margin({bottom: 300})
122        Column() {
123          ToolBar({
124            currentIndex: 2,
125            hwToolBarList: this.toolbarList,
126          })
127        }
128      }.align(Alignment.Bottom)
129      .width('100%').height('100%')
130    }
131  }
132}
133```
134
135![zh-cn_image_0000001658655445](figures/zh-cn_image_0000001658655445.png)
136