HarmonyOS 鸿蒙Next Select 组件为什么不能自定义右侧的Row箭头

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Select 组件为什么不能自定义右侧的Row箭头 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-select-V5#%E5%AD%90%E7%BB%84%E4%BB%B6

Select 组件为什么不能自定义右侧的Row箭头?


更多关于HarmonyOS 鸿蒙Next Select 组件为什么不能自定义右侧的Row箭头的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

目前不支持设置侧的箭头,这是当前的规格,可以给select添加浮层实现

// xxx.ets
import image from '@ohos.multimedia.image'

@Entry
@Component
struct SelectExample {
  @State text: string = "请选择"
  @State index: number = 2
  @State space: number = 8
  @State arrowPosition: ArrowPosition = ArrowPosition.END

  @Builder
  OverlayNode() {
    Column() {
      Image($r('app.media.background'))
    }.width(20).height(20).alignItems(HorizontalAlign.Center)
  }

  build() {
    Column() {
      Select([
        { value: 'aaa', },
        { value: 'bbb', },
        { value: 'ccc', },
        { value: 'ddd', }])
        .selected(this.index)
        .value(this.text)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .space(this.space)
        .arrowPosition(this.arrowPosition)
        .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
        .optionWidth(200)
        .optionHeight(300)
        .overlay(this.OverlayNode(), {
          align: Alignment.Bottom,
          offset: { x: -30, y: -10 }
        })
        .arrowPosition(ArrowPosition.START)
        .onSelect((index: number, text?: string | undefined) => {
          console.info('Select:' + index)
          this.index = index;
          if (text) {
            this.text = text;
          }
        })
    }.width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next Select 组件为什么不能自定义右侧的Row箭头的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用自定义布局和逻辑来模拟Next Select组件的功能,同时完全控制UI元素的样式。

检查鸿蒙系统的最新文档或更新,看是否有提供新的API或方法来支持更灵活的UI自定义。

然而,请注意,这些方法可能需要额外的开发工作,并且可能无法完全复制Next Select组件的所有原生功能和行为。

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

回到顶部