工具栏目

效果

子组件

无

参数

activateIndex

当前活跃的序号

toolBarList

数组[] ItemOption 选项

tabbar 列表

• content

tabbr 文字

• icon

图标

• action

点击事件

• iconColor

默认图标颜色

• textColor

默认文本颜色

• activatedIconColor

激活图标的颜色

• activatedTextColor

激活的文字颜色

• state

ItemState.ENABLE(能点击)

ItemState.DISABLE(不能点击)

ItemState.ACTIVATE(激活状态)

激活状态

{
    content: '剪贴我是超超超超超超超超超长样式',
    icon: $r('sys.media.ohos_ic_public_share'),
    action: () => {
        console.info("第1个")
        this.activateIndex = 0;
        console.info(this.activateIndex.toString())
        this.changeState()
    },
    iconColor: Color.Red,
    textColor: Color.Blue,
    activatedIconColor: Color.Blue,
    activatedTextColor: Color.Red,
    state: ItemState.ENABLE
}

属性

无

事件

无

示例

import { ItemState, ToolBar, ToolBarOptions } from '@kit.ArkUI';

@Entry
@Component
struct Index7 {
    @State toolbarList: ToolBarOptions = new ToolBarOptions();
    @State activateIndex: number = 0;

    // 赋值状态
    changeState() {
        // 清空
        this.toolbarList.forEach((content) => {
            content.state = ItemState.ENABLE
        })
        // 赋值
        this.toolbarList[this.activateIndex].state = ItemState.ACTIVATE
    }

    setTabBar() {
        // 默认高度是56
        this.toolbarList.push({
            content: '剪贴我是超超超超超超超超超长样式',
            icon: $r('sys.media.ohos_ic_public_share'),
            action: () => {
                console.info("第1个")
                this.activateIndex = 0;
                console.info(this.activateIndex.toString())
                this.changeState()
            },
            iconColor: Color.Red,
            textColor: Color.Blue,
            activatedIconColor: Color.Blue,
            activatedTextColor: Color.Red,
            state: ItemState.ENABLE
        })
        this.toolbarList.push({
            content: '拷贝',
            icon: $r('sys.media.ohos_ic_public_copy'),
            action: () => {
                console.info("第2个")
                this.activateIndex = 1;
                console.info(this.activateIndex.toString())
                this.changeState()
            },
            state: ItemState.ENABLE,
            iconColor: Color.Red,
            textColor: Color.Blue,
            activatedIconColor: Color.Blue,
            activatedTextColor: Color.Red
        })
        this.toolbarList.push({
            content: '粘贴',
            icon: $r('sys.media.ohos_ic_public_paste'),
            action: () => {
                console.info("第3个")
                this.activateIndex = 2;
                console.info(this.activateIndex.toString())
                this.changeState()
            },
            iconColor: Color.Red,
            textColor: Color.Blue,
            activatedIconColor: Color.Blue,
            activatedTextColor: Color.Red,
            state: ItemState.ENABLE
        })
        this.toolbarList.push({
            content: '全选',
            icon: $r('sys.media.ohos_ic_public_select_all'),
            action: () => {
                console.info("第4个")
                this.activateIndex = 3;
                console.info(this.activateIndex.toString())
                this.changeState()
            },
            iconColor: Color.Red,
            textColor: Color.Blue,
            activatedIconColor: Color.Blue,
            activatedTextColor: Color.Red,
            state: ItemState.ENABLE
        })
        this.toolbarList.push({
            content: '分享',
            icon: $r('sys.media.ohos_ic_public_share'),
            action: () => {
                console.info("分享111")
                this.activateIndex = 4;
                console.info(this.activateIndex.toString())
                this.changeState()
            },
            iconColor: Color.Red,
            textColor: Color.Blue,
            activatedIconColor: Color.Blue,
            activatedTextColor: Color.Red,
            state: ItemState.ENABLE
        })
        this.toolbarList.push({
            content: '分享',
            icon: $r('sys.media.ohos_ic_public_share'),
            action: () => {
                console.info("分享222")
                this.activateIndex = 5;
                console.info(this.activateIndex.toString())
                this.changeState()
            },
            iconColor: Color.Red,
            textColor: Color.Blue,
            activatedIconColor: Color.Blue,
            activatedTextColor: Color.Red,
            state: ItemState.ENABLE
        })
    }

    aboutToAppear() {
        // 设置tabbar
        this.setTabBar()
    }

    build() {
        Row() {
            Stack() {
                Column() {
                    Column() {
                        if (this.activateIndex == 0) {
                            Row() {
                                Text("测试哈哈哈")
                                    .lineHeight('calc(100% - 56vp)')
                                    .textAlign(TextAlign.Center)
                                    .fontColor(Color.Yellow)
                                    .width('100%')
                                    .fontSize(64)
                            }
                            .width('100%')
                            .size({ width: 'calc(100%)', height: 'calc(100% - 56vp)' })
                            .backgroundColor(Color.Red)
                        }
                        if (this.activateIndex == 1) {
                            Row() {
                            }
                            .width('100%')
                            .backgroundColor(Color.Blue)
                            .size({ width: 'calc(100%)', height: 'calc(100% - 56vp)' })
                        }
                        if (this.activateIndex == 2) {
                            Row() {
                            }
                            .width('100%')
                            .backgroundColor(Color.Green)
                            .size({ width: 'calc(100%)', height: 'calc(100% - 56vp)' })
                        }
                        if (this.activateIndex == 3) {
                            Row() {
                            }
                            .width('100%')
                            .backgroundColor(Color.Yellow)
                            .size({ width: 'calc(100%)', height: 'calc(100% - 56vp)' })
                        }
                        if (this.activateIndex == 4) {
                            Row() {
                            }
                            .width('100%')
                            .backgroundColor(Color.Black)
                            .size({ width: 'calc(100%)', height: 'calc(100% - 56vp)' })
                        }
                        if (this.activateIndex == 5) {
                            Row() {
                            }
                            .width('100%')
                            .backgroundColor(Color.Brown)
                            .size({ width: 'calc(100%)', height: 'calc(100% - 56vp)' })
                        }
                        if (this.activateIndex == 6) {
                            Row() {
                            }
                            .width('100%')
                            .backgroundColor(Color.Pink)
                            .size({ width: 'calc(100%)', height: 'calc(100% - 56vp)' })
                        }


                    }

                    ToolBar({
                        activateIndex: this.activateIndex,
                        toolBarList: this.toolbarList,
                    })

                }
            }
            .align(Alignment.Bottom)
            .width('100%')
            .height('100%')
        }
    }
}