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%')
}
}