HarmonyOS 鸿蒙Next 关于菜单（Menu）组件，如何控制当条件不满足时点击按钮不显示菜单？

发布于 1周前 作者 phonegap100 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 关于菜单（Menu）组件，如何控制当条件不满足时点击按钮不显示菜单？

实现一个点击按钮弹出下拉菜单的功能，期望当菜单数据为空时点击按钮不再显示菜单组件。但是实际验证发现，菜单数组变为空后，点击按钮仍弹出了Menu容器（一个空白条） 通过bindMune绑定菜单，当@State menuEnabled == false时仍弹出了菜单视图（有个白条，应该是Menu组件容器自带的）。
 

@State menuEnable:boolean = true


build() {


Button(’弹出菜单‘)


.bindMenu(this.menuEnabled? this.MyMenu : undefined)


}

…… 逻辑中会将this.menuEnable 变为false，但是再次点击Button(’弹出菜单‘)  仍会弹出一个白条。Menu组件的.onAppear()会回调，说明菜单还是弹出了。期望此时不弹出菜单，如何解决？


更多关于HarmonyOS 鸿蒙Next 关于菜单（Menu）组件，如何控制当条件不满足时点击按钮不显示菜单？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
可以使用visibility来控制显示与隐藏，

demo如下

class classComponent {
  content: string = '';
  labelInfo: string = '';
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TestMenuPage {
  [@State](/user/State) list1: Array<classComponent> = [
    { content: '复制', labelInfo: "Ctrl+C" },
    { content: "粘贴", labelInfo: "Ctrl+V" }
  ];
  [@State](/user/State) menuIsShow:boolean = false;
  [@State](/user/State) menuBackGroundColor:Color = Color.White;
  [@State](/user/State) menuIsDelete:boolean = false;
  [@Builder](/user/Builder)
  MyMenu() {
    Menu() {
      ForEach(this.list1, (item: classComponent) => {
        MenuItem({ content: `${item.content}`, labelInfo: `${item.labelInfo}` })
      })
    }.visibility(this.menuIsDelete? Visibility.None:Visibility.Visible)
  }
  build() {
    Column() {
      Column() {
        Button('点击')
          .onClick(()=>{
            this.menuIsShow = !this.menuIsShow;
          })
        Button('删除菜单').onClick(() => {
          this.list1 = []
          this.menuIsDelete = true
        })
      }
      .width('100%')
      .padding(20)
      // .bindMenu(this.MyMenu)
      .bindContextMenu(this.menuIsShow,this.MyMenu(),{
        // backgroundColor:this.menuIsDelete?Color.Transparent:Color.White,
        backgroundColor:Color.White,
        backgroundBlurStyle:BlurStyle.NONE
      })
      .alignItems(HorizontalAlign.Start)
    }
    .height('100%')
    .backgroundColor(Color.Red)
  }
}

更多关于HarmonyOS 鸿蒙Next 关于菜单（Menu）组件，如何控制当条件不满足时点击按钮不显示菜单？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next中，控制菜单（Menu）组件在条件不满足时点击按钮不显示菜单，可以通过以下几种方式实现：

  1. 使用条件渲染：在绑定菜单时，通过条件判断来决定是否渲染菜单组件。例如，使用三元运算符或if语句，在条件不满足时返回undefined或不渲染菜单组件。
  2. 动态控制菜单属性：为菜单组件添加可见性属性，通过控制该属性的状态来决定菜单是否显示。这可以通过编程逻辑来实现，根据特定条件动态设置菜单的可见性。
  3. 利用bindMenu的响应机制：在绑定菜单的组件上，通过编程逻辑控制何时调用bindMenu接口。如果条件不满足，则不调用bindMenu接口，从而不显示菜单。

示例代码如下：

@Entry
@Component
struct TestMenuPage {
    @State list1: Array<any> = [{content: '复制', labelInfo: 'Ctrl+C'}, {content: '粘贴', labelInfo: 'Ctrl+V'}];
    @State menuIsShow: boolean = true;

    @Builder MyMenu() {
        Menu() {
            this.list1.forEach(item => {
                MenuItem({ content: item.content, labelInfo: item.labelInfo });
            });
        }
    }

    build() {
        Button('点击')
            .onClick(() => {
                if (this.list1.length > 0) {
                    this.menuIsShow = !this.menuIsShow;
                }
            })
            .bindMenu(this.menuIsShow ? this.MyMenu : undefined);
    }
}

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部