HarmonyOS鸿蒙Next中如何展示下拉菜单

HarmonyOS鸿蒙Next中如何展示下拉菜单 化验单识别功能 需要在在List的基础上展示如点击出现下拉菜单

3 回复

您可以参考如下demo:

@Component
@Entry

struct PopupExample {

 private arr: string[] = []

 @State currentMenu: string = "测试0"

 @State handlePopup: boolean = false

 scroller:Scroller = new Scroller()

 aboutToAppear(): void {

  for (let i = 0; i < 8; i++) {

   this.arr.push('测试' + i)

  }
 }

 @Builder
 customDialogBuilder() {

  Column(){

   List({ scroller: this.scroller }) {

    ForEach(this.arr, (item: string) => {

     ListItem() {

      if(this.currentMenu == item){
       Text('' + item)
        .width('100%')
        .height(20)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .backgroundColor('000')
        .onClick(() => {
         this.currentMenu = item
         this.handlePopup = !this.handlePopup
        })
      }else{
       Text('' + item)
        .width('100%')
        .height(20)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .backgroundColor(0xFFFFFF)
        .onClick(() => {
         this.currentMenu = item
         this.handlePopup = !this.handlePopup
        })
      }

     }

    }
    .padding({ top: 2 })

   }

   .edgeEffect(EdgeEffect.None)

  }

  .width(100)
  .height('auto')
  .backgroundColor(Color.Gray)

 }

 build() {

  Column() {

   Row() {

    Text(this.currentMenu)

    Image($r('app.media.ic_public_reduce'))
     .width('30%')
     .height('50%')

   }
   .bindPopup(this.handlePopup, {
    builder: this.customDialogBuilder(),
    enableArrow: false, //设置是否显示箭头。
    radius: 0, //设置气泡圆角半径。
    width: 100,
    targetSpace: 0,
    mask: false, //设置气泡是否有遮罩层及遮罩
    onStateChange: (e) => { //弹窗状态变化事件回调
     if (!e.isVisible) {
      this.handlePopup = false
     }
    }
   })
   .onClick(() => {
    this.handlePopup = !this.handlePopup
   })
   .backgroundColor(Color.Red)
   .alignItems(VerticalAlign.Center)
   .justifyContent(FlexAlign.SpaceBetween)
   .height(50)
   .width(100)
   .padding(
    {
     left: 10,
     right: 10
    }
   )

  }
  .justifyContent(FlexAlign.End)
  .alignItems(HorizontalAlign.End)
  .margin({ top: 120 })
  .width('30%')
  .height(40)

 }
}

更多关于HarmonyOS鸿蒙Next中如何展示下拉菜单的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，展示下拉菜单可以通过使用DropdownMenu组件来实现。DropdownMenu是一个用于显示下拉菜单的UI组件，通常与DropdownButton配合使用。以下是一个简单的示例代码，展示如何在鸿蒙Next中实现下拉菜单：

import { DropdownMenu, DropdownButton, DropdownItem } from '@ohos/dropdown';

@Entry
@Component
struct DropdownMenuExample {
  private items: Array<string> = ['选项1', '选项2', '选项3'];

  build() {
    Column() {
      DropdownButton({ label: '选择' }) {
        DropdownMenu() {
          ForEach(this.items, (item: string) => {
            DropdownItem({ label: item }).onClick(() => {
              console.log(`选中了: ${item}`);
            });
          });
        }
      }
    }
  }
}

在这个示例中，DropdownButton用于触发下拉菜单的显示，DropdownMenu用于定义下拉菜单的内容，DropdownItem则代表菜单中的每一个选项。用户点击某个选项时，会触发onClick事件，并输出选中的选项。

DropdownMenu组件支持自定义样式、动画效果以及事件处理，开发者可以根据具体需求进行调整和扩展。通过这种方式，可以轻松地在鸿蒙Next应用中实现下拉菜单功能。

在HarmonyOS鸿蒙Next中，展示下拉菜单可以通过Dropdown组件实现。首先，在布局文件中引入Dropdown，并设置数据源和样式。然后，在代码中通过setOnItemSelectedListener监听用户选择事件。以下是一个简单示例：

<Dropdown
    ohos:id="$+id/dropdown"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:prompt="请选择"
    ohos:entries="@array/menu_items"/>

Dropdown dropdown = (Dropdown) findComponentById(ResourceTable.Id_dropdown);
dropdown.setOnItemSelectedListener((adapterView, view, position, id) -> {
    String selectedItem = adapterView.getItemAtPosition(position).toString();
    // 处理选择项
});

通过这种方式，你可以在鸿蒙Next应用中实现并展示下拉菜单。

回到顶部