HarmonyOS鸿蒙Next中手搓了一个可以输入也可以下拉的下拉框，显示与Select一模一样

HarmonyOS鸿蒙Next中手搓了一个可以输入也可以下拉的下拉框，显示与Select一模一样 Select只能下拉，不能键盘输入，因此利用TextInput和Menu手搓了一个下拉框，效果很好。其中arrowtriangle_down_fill图片是从华为网站下的。不过还是建议优化一下Select使得能够输入。

@Entry
@Component
struct EditableSelect {
  @State inputValue: string = ''
  @State inputHeight: number = 0
  private options: string[] = ['选项一', '选项二', '选项三']
  @Builder
  MyMenu() {
    Menu() {
      ForEach(this.options, (item: string, index: number) => {
        MenuItem() {
          Text(item)
        }
        .onClick(() => {
          this.inputValue = item
        })
      })
    }
  }
  build() {
    Column() {
      Row() {
        TextInput({ text: this.inputValue })
          .fontColor($r('sys.color.font'))
          .backgroundColor($r('sys.color.background_primary'))
          .layoutWeight(1)
          .onAreaChange((newArea) => {
            this.inputHeight = newArea.height.valueOf() as number
          })
        Row() {
          Image($r('app.media.arrowtriangle_down_fill'))
            .width(10)
            .aspectRatio(1)
        }
        .height(this.inputHeight)
        .padding(18)
      }
      .width('100%')
      .borderWidth(1)
      .borderColor($r('sys.color.font'))
      .bindMenu(this.MyMenu)
      .borderRadius(5)
    }
    .padding(10)
  }
}

更多关于HarmonyOS鸿蒙Next中手搓了一个可以输入也可以下拉的下拉框，显示与Select一模一样的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

优化了一下，并做成了Component可以重复使用：

@Component
struct EditableSelect {
  @State inputValue: string = ''
  private options: string[] = ['选项一', '选项二', '选项三']
  @Builder
  SelectMenu() {
    Menu() {
      ForEach(this.options, (item: string, index: number) => {
        MenuItem() {
          Text(item)
        }
        .onClick(() => {
          this.inputValue = item
        })
      })
    }
  }
  build() {
    Row() {
      TextInput({ text: this.inputValue })
        .fontColor($r('sys.color.font'))
        .backgroundColor($r('sys.color.background_primary'))
        .borderRadius(5)
        .layoutWeight(1)
      Row() {
        Image($r('app.media.arrowtriangle_down_fill'))
          .width(10)
          .aspectRatio(1)
      }
      .padding({ right: 18 })
    }
    .borderWidth(1)
    .borderColor($r('sys.color.font'))
    .borderRadius(5)
    .bindMenu(this.SelectMenu)
  }
}

@Entry
@Component
struct Main {
  build() {
    Column() {
      EditableSelect()
        .width('100%')
    }
    .padding(10)
  }
}

更多关于HarmonyOS鸿蒙Next中手搓了一个可以输入也可以下拉的下拉框，显示与Select一模一样的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可通过自定义组件实现兼具输入和下拉选择功能的控件。使用ArkTS声明式UI开发，结合TextInput和Picker组件构建交互界面。通过状态管理控制下拉列表的显示隐藏，利用条件渲染动态切换输入和选择模式。事件处理需绑定onEditChange监听输入内容，onSelect处理选项确认。布局使用Column或Stack容器实现元素层叠，配合点击事件和动画效果完成平滑过渡。数据绑定通过@State和@Prop装饰器同步界面与数据源。

您使用TextInput和Menu组合实现可输入下拉框的思路很巧妙，很好地解决了原生Select组件不支持键盘输入的问题。这个实现有几个值得肯定的技术点：

  1. 通过@Builder构建Menu组件，利用ForEach动态渲染选项列表，代码结构清晰
  2. 使用bindMenu将菜单绑定到Row容器，实现点击下拉图标展开菜单
  3. 通过onAreaChange获取TextInput高度，确保下拉图标与输入框高度对齐
  4. 采用系统颜色资源($r(‘sys.color.*’))，保持了与系统UI的一致性

代码中Menu的触发逻辑可以进一步优化，目前点击整个Row区域都会触发菜单，可以添加onClick事件精确控制只在点击下拉图标时展开菜单。

这种组合方案确实提供了比原生Select更好的用户体验，既保留了选择功能，又增加了输入灵活性。期待官方在后续版本中为Select组件增加输入支持。

回到顶部