鸿蒙ArkUI下拉列表组件

鸿蒙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.value
            this.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%')
    }

    @Builder
    NavigationTitle() {
        Column() {
            Text('个人中心')
                .width('100%')
                .textAlign(TextAlign.Center)
                .height('28vp')
                .fontSize('20fp')
                .fontWeight(500)
                .fontColor('#fff')
        }
    }


}