鸿蒙ArkUI下拉列表组件，官方提供的只是基础使用，在使用过程非常不方便，我们进行了组件的封装。
import {IDynamicObject} from './IType'
/*** 自定义颜色*/
@Component
export default struct DiygwSelect{//绑定的值@Link @Watch('onValue') value:string;// 保存所有单选框的名称@Link list: IDynamicObject[];// 隐藏值@State valueField: string = 'value';// 显示值@State labelField: string = 'label';@State placeHolder:string = '请选择'//未选中图标@State labelImg: Resource = $r('app.media.user');//是否文本图片@State isLabelImg: boolean = false;@State labelImgWidth: number = 20;@State labelImgHeight: number = 20;//标题文本@State label:string = '下拉';//水平状态时，文本占大小@State labelWidth:number = 80;//是否标题文本换行@State isWrapLabel:boolean = false;//是否标题文本@State isLabel:boolean = true;//标题颜色@State labelColor:string = "#333333";//自动标题长度@State isLabelAuto:boolean = false;//文本字体大小@State textSize:number = 14;//选中图版本大小@State imgSize:number = 28;//组件内边距@State leftRightPadding:number = 16;@State topBottomPadding:number = 6;@State textAlign:TextAlign = TextAlign.End@State range:string[]=[];@State selectLabel:string = "";@State isBorder:boolean = true;//初始化选中initCheck(){for (let i = 0; i < this.list.length; i++) {if(this.list[i][this.valueField] == this.value) {this.selectLabel = this.list[i][this.labelField];}}}//监听选中onValue() {this.initCheck()}build() {Flex({alignItems:this.isWrapLabel?ItemAlign.Start:ItemAlign.Center,direction:this.isWrapLabel?FlexDirection.Column:FlexDirection.Row,justifyContent:FlexAlign.Start}){if(this.isLabel){Row(){if(this.isLabelImg){Image(this.labelImg).width(this.labelImgWidth).height(this.labelImgHeight).margin({ left:3 }).flexShrink(0)}if(this.isLabelAuto){Text(this.label).flexShrink(0).fontColor(this.labelColor).fontSize(this.textSize).margin({bottom:this.isWrapLabel?10:0,right:10,}).textAlign(TextAlign.Start);}else{Text(this.label).fontColor(this.labelColor).width(this.isWrapLabel?'100%':this.labelWidth).fontSize(this.textSize).margin({bottom:this.isWrapLabel?10:0}).textAlign(TextAlign.Start);}}.margin({top:this.isWrapLabel?10:0})}Flex({alignItems:ItemAlign.Center,}){Text(this.selectLabel).width('100%').fontSize(this.textSize).textAlign(this.isWrapLabel?TextAlign.Start:this.textAlign);Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')}.onClick(() => {TextPickerDialog.show({range: this.range,defaultPickerItemHeight: 40,onAccept: (value: TextPickerResult) => {this.value = value.valuethis.selectLabel = this.list[value.index][this.labelField]}})}).flexGrow(1)}.borderWidth({bottom: this.isBorder?1:0}).borderColor({bottom: "#eee"}).borderStyle(BorderStyle.Solid).height(this.textSize+(this.isWrapLabel?20:0)+30+this.topBottomPadding*2).padding({left:this.leftRightPadding,right:this.leftRightPadding,top:this.topBottomPadding,bottom:this.topBottomPadding}).onAppear(() => {this.selectLabel = this.placeHolder;for (let i = 0; i < this.list.length; i++) {this.range.push(this.list[i][this.labelField])}this.initCheck()})}
}
使用也是非常得简单只需要调用组件
import {navigateTo
} from '../common/Page'
import {IDynamicObject
} from '../component/IType';
import DiygwSelect from '../component/Select'
@Entry
@Component
export struct User {@State sctDatas: IDynamicObject[] = [{value: '1',label: '选项一'}, {value: '2',label: '选项二'}, {value: '3',label: '选项三'}];@State sct: string = '1';async onPageShow() {}async aboutToAppear() {await this.onPageShow()}build() {Column() {Navigation().width('100%').height('56vp').backgroundColor('#07c160').title(this.NavigationTitle()).titleMode(NavigationTitleMode.Mini).align(Alignment.Center).hideBackButton(true)Scroll() {Flex({direction: FlexDirection.Column}) {DiygwSelect({label: '下拉',value: $sct,list: $sctDatas})}.height('100%')}.height('100%').layoutWeight(1)}.alignItems(HorizontalAlign.Start).height('100%')}@BuilderNavigationTitle() {Column() {Text('个人中心').width('100%').textAlign(TextAlign.Center).height('28vp').fontSize('20fp').fontWeight(500).fontColor('#fff')}}}
