HarmonyOS 关于菜单(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
2024-10-29 10:25:27
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

当将菜单列表为空时,点击按钮不在显示菜单组件,案例代码如下:

class classComponent{  
  content:string='';  
  labelInfo:string='';  
}  
@Entry  
@Component  
struct menu{  
  @State list1:Array<classComponent> = [  
    {content:'复制',labelInfo: "Ctrl+C"},  
    { content: "粘贴", labelInfo: "Ctrl+V" }  
  ]  
  @Builder  
  MyMenu(){  
    Menu(){  
      ForEach(this.list1,(item:classComponent)=>{  
        MenuItem({ content: `${item.content}`, labelInfo: `${item.labelInfo}` })  
      })  
    }  
  }  
  build(){  
    Column(){  
      Button('点击')  
      Button('删除菜单').onClick(()=>{  
        this.list1 = []  
      })  
    }.width('100%').padding(20).bindMenu(this.MyMenu).alignItems(HorizontalAlign.Start)  
  }  
}

​您可以使用visibility来控制显示与隐藏。

demo如下​:

class classComponent {  
  content: string = '';  
  labelInfo: string = '';  
}  
  
@Entry  
@Component  
struct TestMenuPage {  
  @State list1: Array<classComponent> = [  
    { content: '复制', labelInfo: "Ctrl+C" },  
    { content: "粘贴", labelInfo: "Ctrl+V" }  
  ];  
  @State menuIsShow:boolean = false;  
  @State menuBackGroundColor:Color = Color.White;  
  @State menuIsDelete:boolean = false;  
  
  @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)  
  }  
}
分享
微博
QQ
微信
回复
2024-10-29 17:07:52
相关问题
有谁知道Menu菜单的触发方式
2152浏览 • 1回复 待解决
如何自定义组件原型菜单
856浏览 • 1回复 待解决
绑定菜单后无法使用右键触发菜单
1785浏览 • 1回复 待解决
HarmonyOS web组件alert不显示
521浏览 • 1回复 待解决
如何实现一个下拉菜单
602浏览 • 1回复 待解决
怎样获取底部菜单栏高度
1938浏览 • 1回复 待解决