HarmonyOS鸿蒙Next中下面的分类选项怎么做的

HarmonyOS鸿蒙Next中下面的分类选项怎么做的 cke_371.jpeg

这个点击后会出现下面的选项是怎么做的


更多关于HarmonyOS鸿蒙Next中下面的分类选项怎么做的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，分类选项通常使用Tabs组件实现。开发者通过Tabs和TabContent组件来构建可切换的内容区域。主要步骤如下：

  1. 在build()方法中创建Tabs容器。
  2. 使用TabContent子组件定义每个分类选项对应的内容页面。
  3. 通过TabContent的tabBar属性设置每个选项的标签页，通常使用文本或图标。
  4. 可以设置Tabs的barPosition等属性控制标签栏位置和样式。

这提供了基础的分类导航功能。

更多关于HarmonyOS鸿蒙Next中下面的分类选项怎么做的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，实现图中所示的分类选项（通常称为“底部操作菜单”或“ActionSheet”）主要使用ActionSheet组件。

核心实现步骤如下：

  1. 使用ActionSheet组件：这是系统提供的标准弹窗组件，专门用于从屏幕底部弹出选择菜单。
  2. 设置菜单项：通过ActionSheet的content属性构建菜单内容，通常使用Column容器嵌套多个ActionSheetItem来定义每个选项。
  3. 控制显示与隐藏：通过绑定一个@State变量（例如isPresent）到ActionSheet的show参数来控制其弹出和关闭。
  4. 处理点击事件：为每个ActionSheetItem设置action方法，以响应用户选择。在事件处理函数中，除了执行对应业务逻辑，还需将控制变量置为false以关闭菜单。

示例代码片段如下：

import { ActionSheet, ActionSheetItem, Column, Button } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State isPresent: boolean = false;

  build() {
    Column() {
      Button('显示选项')
        .onClick(() => {
          this.isPresent = true; // 点击按钮触发菜单显示
        })
    }
    .width('100%')
    .height('100%')
  }

  // 定义底部操作菜单
  @Builder
  actionSheetBuilder() {
    ActionSheet({
      title: '分类选择', // 菜单标题（可选）
      show: this.isPresent // 绑定显示状态
    }) {
      Column() {
        // 定义菜单项
        ActionSheetItem({
          label: '选项一',
          action: () => {
            // 处理选项一的逻辑
            this.isPresent = false; // 关闭菜单
          }
        })
        ActionSheetItem({
          label: '选项二',
          action: () => {
            // 处理选项二的逻辑
            this.isPresent = false;
          }
        })
        // 可添加更多ActionSheetItem...
      }
    }
    .onWillDismiss(() => {
      this.isPresent = false; // 处理遮罩层点击等关闭事件
    })
  }
}

关键点说明：

  • 触发方式：通常由按钮（Button）或其它交互控件的onClick事件将状态变量isPresent置为true。
  • 菜单项：ActionSheetItem的label属性设置显示文本，action属性绑定点击后的回调函数。
  • 关闭菜单：在ActionSheetItem的action回调或ActionSheet的onWillDismiss事件中，将状态变量isPresent置为false。

这种实现方式直接利用了HarmonyOS Next的ArkUI框架标准组件，符合设计规范，性能与体验均有保障。

回到顶部