开天辟地 HarmonyOS(鸿蒙) - 组件(导航类): ToolBar(工具栏)

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 HarmonyOS(鸿蒙) - 组件(导航类): ToolBar(工具栏)

示例如下:

pages\component\navigation\ToolBarDemo.ets

/*
 * ToolBar - 工具栏
 * 最多可以显示 5 个选项,超过的选项会放到右侧的“更多”选项里
 */

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

@Entry
@Component
struct ToolBarDemo {

  @State toolBarList: ToolBarOptions = new ToolBarOptions()
  @State message: string = ''

  aboutToAppear() {
    this.toolBarList.push({
      content: '删除',
      icon: $r('sys.media.ohos_ic_public_remove'),
      state: ItemState.ENABLE,
      action: () => {
        this.message = '删除 clicked'
      },
    })
    this.toolBarList.push({
      content: '拷贝',
      icon: $r('sys.media.ohos_ic_public_copy'),
      state: ItemState.DISABLE,
      action: () => {
        this.message = '拷贝 clicked'
      },
    })
    this.toolBarList.push({
      content: '粘贴',
      icon: $r('sys.media.ohos_ic_public_paste'),
      state: ItemState.ACTIVATE,
      action: () => {
        this.message = '粘贴 clicked'
      },
    })
    this.toolBarList.push({
      content: '全选',
      icon: $r('sys.media.ohos_ic_public_select_all'),
      state: ItemState.ACTIVATE,
      action: () => {
        this.message = '全选 clicked'
      },
    })
    this.toolBarList.push({
      content: '分享',
      icon: $r('sys.media.ohos_ic_public_share'),
      action: () => {
        this.message = '分享 clicked'
      },
    })
    this.toolBarList.push({
      content: '播放',
      icon: $r('sys.media.ohos_ic_public_play'),
      action: () => {
        this.message = '播放 clicked'
      },
    })
  }

  build() {
    Column({space:10}) {
      TitleBar()

      Text(this.message)

      /*
       * ToolBar - 工具栏(最多显示 5 个选项,超过的会放到“更多”选项里)
       *   activateIndex - 激活状态的选项的索引位置
       *     此位置的选项的 state 如果是 ItemState.ACTIVATE 的话就会高亮显示
       *   toolBarList - 选项列表(一个 ToolBarOption 对象集合)
       *     content - 选项文本
       *     icon - 选项图标
       *     action - 选项点击后的回调
       *     state - 选项的类型(ItemState 枚举)
       *       ENABLE - 可点击
       *       DISABLE - 不可点击
       *       ACTIVATE - 可点击,且点击后会高亮显示
       */
      ToolBar({
        activateIndex: 2,
        toolBarList: this.toolBarList,
      }).height(60)
    }
  }
}

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

posted @ 2025-02-06 08:09  webabcd  阅读(94)  评论(0)    收藏  举报