鸿蒙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')
}
}
}