HarmonyOS 鸿蒙Next中搜索下拉框

HarmonyOS 鸿蒙Next中搜索下拉框

@Local txt: string  = ''
@Local inputValue: string = ''
@Local showMenu: boolean = false
@Local filteredItems: string[] = ['复制', '粘贴', '剪切', '格式转换']
private allItems: string[] = ['复制', '粘贴', '剪切', '格式转换', '翻译']
SearchController: SearchController = new SearchController();
Search({ value: this.lastName, controller: this.SearchController })
  .width(200)
  .height(40)
  .bindMenu(this.menuBuilder)
  .onChange((value)=>{
    this.filteredItems = this.allItems.filter(item => item.includes(value) || value.includes(item))
  })

@Builder
menuBuilder() {
  Menu() {
    ForEach(this.filteredItems, (item:string) => {
      MenuItem({content:item})
        .onClick(() => {
          this.handleMenuItemClick(item)
        })
    })
  }
}
handleMenuItemClick(action: string) {
  switch(action) {
    case '复制':
      break;
    case '粘贴':
      break;
    case '翻译':
      this.inputValue += '[翻译]'
      break;
  }
  this.showMenu = false
}

点击search，bindMenu不起作用怎么解决


更多关于HarmonyOS 鸿蒙Next中搜索下拉框的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

应该使用".editMenuOptions(this.editMenuOptions)"方法来实现。

参考这里：文本扩展自定义菜单

更多关于HarmonyOS 鸿蒙Next中搜索下拉框的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


标题

文本内容

子标题

更多文本内容

咋一看应该是Search组件没有指定触发元素，因为默认不具备直接触发Menu的交互事件

Search({
  controller: this.SearchController,
  searchButton: { value: '搜索', action: () => this.showMenu = true }  // 通过按钮触发菜单 
})
.width(200)
.height(40)
.bindMenu(this.menuBuilder)

试试将showMenu状态与Menu显示逻辑建立关联

@Local showMenu: boolean = false

// 修改菜单构建器
@Builder
menuBuilder() {
  Menu()
    .onAppear(() => this.showMenu = true)   // 菜单显示时同步状态 
    .onDisappear(() => this.showMenu = false)
    {
      ForEach(this.filteredItems, (item:string) => {
        MenuItem({content:item})
          .onClick(() => {
            this.handleMenuItemClick(item)
            this.showMenu = false  // 选择后关闭菜单
          })
      })
    }
}

很不错的分享，

基本信息

  • 标题: 如何高效学习Markdown
  • 作者: 张三
  • 日期: 2023-10-01

内容:

  1. Markdown是一种轻量级标记语言。
  2. 它以纯文本形式编写文档。

在HarmonyOS Next中，搜索下拉框可通过SearchComponent组件实现。使用SearchController控制下拉行为，数据绑定通过SearchResult处理。关键属性包括hint（提示文本）、icon（搜索图标）和onSubmit（提交回调）。下拉列表需配合List组件动态渲染，数据更新时调用controller.refresh()刷新界面。样式通过SearchComponent的style属性定制，支持暗黑模式适配。

在HarmonyOS Next中，搜索下拉框的bindMenu方法需要确保以下几点才能正常工作：

  1. 确保Search组件设置了正确的controller属性，并且SearchController已正确实例化。

  2. 检查menuBuilder方法是否正确使用了[@Builder](/user/Builder)装饰器，并且返回的Menu组件结构正确。

  3. 确保filteredItems数组在初始化时有值，否则下拉菜单可能为空。

  4. 建议在Search组件上添加onClick事件处理，手动控制showMenu状态：

    Search({...})
  .onClick(() => {
    this.showMenu = true
  })

  5. 确保Menu的显示状态与showMenu变量绑定：

    [@Builder](/user/Builder)
menuBuilder() {
  if(this.showMenu) {
    Menu() {
      // ...菜单内容
    }
  }
}

如果问题仍然存在，可以检查控制台是否有相关错误信息，或者尝试在onChange回调中添加console.log确认事件触发情况。

回到顶部