HarmonyOS 鸿蒙Next select组件怎么隐藏三角图标
HarmonyOS 鸿蒙Next select组件怎么隐藏三角图标
select组件怎么隐藏三角图标
        
          2 回复
        
      
      
        可以使用浮层覆盖原有箭头图标,示例如下:
[@Entry](/user/Entry)
[@Component](/user/Component)
struct SelectExample {
 [@State](/user/State) text: string = "请选择"
 [@State](/user/State) index: number = 2
 [@State](/user/State) space: number = 8
 [@State](/user/State) arrowPosition: ArrowPosition = ArrowPosition.END
 [@Builder](/user/Builder) OverlayNode() {
   Column() {
     Image($r('app.media.heart_fill'))
   }.width(20).height(20).alignItems(HorizontalAlign.Center)
 }
 [@Styles](/user/Styles) clickedStyles():void {
   .backgroundColor(Color.Transparent)
 }
 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: -35, y: -10 }
       })
       .stateStyles({
         clicked: this.clickedStyles,
       })
       .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组件怎么隐藏三角图标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
        
      
                  
                  
                  

