选择下拉框优化

commons/basic/src/main/ets/components/generalComp/TextSelect.ets

@@ -6,14 +6,14 @@ import { BreakPointSize, YTBreakPoint } from '../../utils/YTBreakPoint'
 export struct TextSelect {
   public dropDownImageInfo: DropDownImageInfo = {
     dropDownImage: $r('app.media.ic_expand_more_black'),
-    dropDownImageHeight: 30,
-    dropDownImageWidth: 30,
+    dropDownImageHeight: 11,
+    dropDownImageWidth: 11,
     dropDownImageBackgroundColor: Color.Transparent,
     dropDownImageMargin: { right: 4 }
   } //右侧下拉图标
   public textInfo: TextInfo = {
-    fontSize: 16,
-    fontColor: Color.Black
+    fontSize: 18,
+    fontColor: '#3D3D3D'
   } //显示的文本样式
   public dropDownInfo: DropDownInfo = {
     backgroundColor: Color.Black,
@@ -21,13 +21,15 @@ export struct TextSelect {
     fontColor: Color.White,
     height: 130
   } //下拉框样式
-  @Prop @Require selectOptions: Array<ESObject> = [] //下拉框数据
+  @Prop @Require @Watch('init') selectOptions: Array<ESObject> = [] //下拉框数据
   @Require showName: string = '' //要展示的字段名
+  @Prop showImageName: string = '' //要展示的图片字段名
   defaultOption: ESObject //默认选中项
   public moduleHeight?: Length = 40 //组件高度
   @State private selectHeight: Length = 0
   @State private isShowSelect: boolean = false
   @State private selectText: ResourceStr = ''
+  @State private selectImage: ResourceStr = ''
   public onchange = (item: ESObject) => {
   }
   public textInputSubmit = (text: string) => {
@@ -36,11 +38,28 @@ export struct TextSelect {
   @StorageProp(YTBreakPoint.BreakPointVp) breakPointSize: BreakPointSize = { width: 0, height: 0 }
   @State selectPosition: Position = { x: 0, y: 0 }
 
+  init() {
+    if (this.selectOptions[0]) {
+      if (!this.defaultOption) {
+        this.defaultOption = this.selectOptions[0]
+      }
+      this.selectText = this.defaultOption[this.showName]
+      if (this.showImageName) {
+        this.selectImage = this.defaultOption[this.showImageName]
+      }
+    }
+  }
+
   aboutToAppear(): void {
-    if (!this.defaultOption) {
-      this.defaultOption = this.selectOptions[0]
+    if (this.selectOptions[0]) {
+      if (!this.defaultOption) {
+        this.defaultOption = this.selectOptions[0]
+      }
+      this.selectText = this.defaultOption[this.showName]
+      if (this.showImageName) {
+        this.selectImage = this.defaultOption[this.showImageName]
+      }
     }
-    this.selectText = this.defaultOption[this.showName]
   }
 
   build() {
@@ -59,16 +78,33 @@ export struct TextSelect {
         })
       }
       Column() {
-        Row() {
+        RelativeContainer() {
+          if (this.selectImage) {
+            Image(this.selectImage)
+              .width(14)
+              .alignRules({
+                'center': { anchor: '__container__', align: VerticalAlign.Center },
+                'start': { anchor: '__container__', align: HorizontalAlign.Start }
+              })
+          }
+
           Text(this.selectText)
             .fontSize(this.textInfo.fontSize)
-            .padding({ left: 15 })
+            .fontWeight(FontWeight.Normal)
+            .fontColor(this.textInfo.fontColor)
+            .alignRules({
+              'center': { anchor: '__container__', align: VerticalAlign.Center },
+              'middle': { anchor: '__container__', align: HorizontalAlign.Center }
+            })
 
           Image(this.dropDownImageInfo.dropDownImage)
             .height(this.dropDownImageInfo.dropDownImageHeight)
             .width(this.dropDownImageInfo.dropDownImageWidth)
-            .margin(this.dropDownImageInfo.dropDownImageMargin)
             .backgroundColor(this.dropDownImageInfo.dropDownImageBackgroundColor)
+            .alignRules({
+              'center': { anchor: '__container__', align: VerticalAlign.Center },
+              'end': { anchor: '__container__', align: HorizontalAlign.End }
+            })
 
         }
         .onClick(() => {
@@ -84,7 +120,8 @@ export struct TextSelect {
         .height('100%')
         .width('100%')
         .border({ width: 1, color: '#cbcbcb', radius: 5 })
-        .justifyContent(FlexAlign.SpaceBetween)
+        .backgroundColor(Color.White)
+        .padding({ left: 16, right: 16 })
 
         if (this.isShowSelect) {
           this.selectBuilder()
@@ -104,26 +141,47 @@ export struct TextSelect {
   @Builder
   selectBuilder() {
     Row() {
-      List({ space: 10 }) {
+      List() {
         ForEach(this.selectOptions, (item: ESObject) => {
           ListItem() {
-            Text(item[this.showName])
-              .width('100%')
-              .fontSize(this.dropDownInfo.fontSize)
-              .fontColor(this.dropDownInfo.fontColor)
-              .padding({ top: 4, bottom: 4 })
-              .onClick(() => {
-                this.selectText = item[this.showName]
-                this.isShowSelect = false
-                this.selectHeight = 0
-                this.onchange(item)
-              })
-              .margin({
-                left: 15,
-                right: 15,
-                top: 4,
-                bottom: 4
-              })
+            RelativeContainer() {
+
+              Image(item[this.showImageName])
+                .width(14)
+                .alignRules({
+                  'center': { anchor: '__container__', align: VerticalAlign.Center },
+                  'start': { anchor: '__container__', align: HorizontalAlign.Start }
+                })
+
+              Text(item[this.showName])
+                .fontSize(this.dropDownInfo.fontSize)
+                .fontColor(this.dropDownInfo.fontColor)
+                .fontWeight(FontWeight.Normal)
+                // .padding({ top: 4, bottom: 4 })
+                // .margin({
+                //   left: 15,
+                //   right: 15,
+                //   top: 4,
+                //   bottom: 4
+                // })
+                .alignRules({
+                  'center': { anchor: '__container__', align: VerticalAlign.Center },
+                  'middle': { anchor: '__container__', align: HorizontalAlign.Center }
+                })
+
+            }
+            .width('100%')
+            .height(this.moduleHeight)
+            .onClick(() => {
+              this.selectText = item[this.showName]
+              if (this.showImageName) {
+                this.selectImage = item[this.showImageName]
+              }
+              this.isShowSelect = false
+              this.selectHeight = 0
+              this.onchange(item)
+            })
+            .padding({ left: 16, right: 16 })
           }
         })
         if (this.textInputInfo) {
@@ -167,3 +225,4 @@ export struct TextSelect {
     .borderRadius({ bottomLeft: 10, bottomRight: 10 })
   }
 }
+