添加下拉选择框组件

commons/basic/Index.ets

@@ -1,5 +1,6 @@
 export { BackgroundPageModifier } from './src/main/ets/styles/AttributeModifier'
-
+export { TextSelect } from './src/main/ets/components/generalComp/TextSelect'
+export { DropDownImageInfo, DropDownInfo, TextInfo, TextInputInfo } from './src/main/ets/models/TextSelectModel'
 export { pushMessageUtil } from './src/main/ets/utils/NoticeUtil'
 
 export { yTPreferences } from './src/main/ets/utils/YTPreferencesUtil'

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

@@ -0,0 +1,168 @@
+import { DropDownImageInfo, DropDownInfo, TextInfo, TextInputInfo } from '../../models/TextSelectModel'
+import { BreakPointSize, YTBreakPoint } from '../../utils/YTBreakPoint'
+
+
+@Component
+export struct TextSelect {
+  public dropDownImageInfo: DropDownImageInfo = {
+    dropDownImage: $r('app.media.ic_expand_more_black'),
+    dropDownImageHeight: 30,
+    dropDownImageWidth: 30,
+    dropDownImageBackgroundColor: Color.Transparent,
+    dropDownImageMargin: { right: 4 }
+  } //右侧下拉图标
+  public textInfo: TextInfo = {
+    fontSize: 16,
+    fontColor: Color.Black
+  } //显示的文本样式
+  public dropDownInfo: DropDownInfo = {
+    backgroundColor: Color.Black,
+    fontSize: 16,
+    fontColor: Color.White,
+    height: 130
+  } //下拉框样式
+  @Prop @Require selectOptions: Array<ESObject> = [] //下拉框数据
+  @Require showName: string = '' //要展示的字段名
+  defaultOption: ESObject //默认选中项
+  public moduleHeight?: Length = 40 //组件高度
+  @State private selectHeight: Length = 0
+  @State private isShowSelect: boolean = false
+  @State private selectText: ResourceStr = ''
+  public onchange = (item: ESObject) => {
+  }
+  public textInputSubmit = (text: string) => {
+  }
+  textInputInfo: TextInputInfo | null = null //自定义输入框配置，不传则不显示
+  @StorageProp(YTBreakPoint.BreakPointVp) breakPointSize: BreakPointSize = { width: 0, height: 0 }
+  @State selectPosition: Position = { x: 0, y: 0 }
+
+  aboutToAppear(): void {
+    if (!this.defaultOption) {
+      this.defaultOption = this.selectOptions[0]
+    }
+    this.selectText = this.defaultOption[this.showName]
+  }
+
+  build() {
+    Column() {
+      if (this.isShowSelect) {
+        Column() {
+
+        }
+        .position(this.selectPosition)
+        .backgroundColor(Color.Transparent)
+        .width(this.breakPointSize.width)
+        .height(this.breakPointSize.height)
+        .onClick(() => {
+          this.isShowSelect = false
+          this.selectHeight = 0
+        })
+      }
+      Column() {
+        Row() {
+          Text(this.selectText)
+            .fontSize(this.textInfo.fontSize)
+            .padding({ left: 15 })
+
+          Image(this.dropDownImageInfo.dropDownImage)
+            .height(this.dropDownImageInfo.dropDownImageHeight)
+            .width(this.dropDownImageInfo.dropDownImageWidth)
+            .margin(this.dropDownImageInfo.dropDownImageMargin)
+            .backgroundColor(this.dropDownImageInfo.dropDownImageBackgroundColor)
+
+        }
+        .onClick(() => {
+          this.isShowSelect = !this.isShowSelect
+          animateTo({ duration: 300 }, () => {
+            if (this.isShowSelect) {
+              this.selectHeight = this.dropDownInfo.height
+            } else {
+              this.selectHeight = 0
+            }
+          })
+        })
+        .height('100%')
+        .width('100%')
+        .border({ width: 1, color: '#cbcbcb', radius: 5 })
+        .justifyContent(FlexAlign.SpaceBetween)
+
+        if (this.isShowSelect) {
+          this.selectBuilder()
+        }
+      }
+      .height(this.moduleHeight)
+    }
+    .onAreaChange((old, newArea) => {
+      this.selectPosition = {
+        x: -(newArea.globalPosition.x as number),
+        y: -(newArea.globalPosition.y as number)
+      }
+    })
+  }
+
+  @Builder
+  selectBuilder() {
+    Row() {
+      List({ space: 10 }) {
+        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
+              })
+          }
+        })
+        if (this.textInputInfo) {
+          ListItem() {
+            Row() {
+              TextInput({ placeholder: this.textInputInfo.placeholder, text: this.textInputInfo.text })
+                .width('100%')
+                .height('100%')
+                .placeholderFont({ size: 14 })
+                .padding({ left: 10, right: 10 })
+                .border({ width: 1, color: '#cbcbcb', radius: 5 })
+                .backgroundColor(Color.Transparent)
+                .onChange((value: string) => {
+                  this.textInputInfo!.text = value
+                })
+                .onSubmit(() => {
+                  this.selectText = this.textInputInfo!.text
+                  this.isShowSelect = false
+                  this.selectHeight = 0
+                  this.textInputSubmit(this.textInputInfo!.text)
+                  this.textInputInfo!.text = ''
+                })
+
+            }
+            .padding({ left: 10, right: 10 })
+            .height(this.textInputInfo.height)
+            .width('100%')
+          }
+        }
+      }
+      .height('100%')
+      .scrollBar(BarState.Off)
+      .listDirection(Axis.Vertical) // 排列方向
+      // .divider({ strokeWidth: 1, color: 0xCBCBCB }) // 每行之间的分界线
+      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
+    }
+    .backgroundColor(this.dropDownInfo.backgroundColor)
+    .border(this.dropDownInfo.border)
+    .width('100%')
+    .height(this.selectHeight)
+    .borderRadius({ bottomLeft: 10, bottomRight: 10 })
+  }
+}

commons/basic/src/main/ets/models/TextSelectModel.ets

@@ -0,0 +1,56 @@
+/**
+ * 右侧下拉图片配置
+ */
+export interface DropDownImageInfo {
+  /**
+   * 右侧下拉图片
+   */
+  dropDownImage: ResourceStr,
+
+  /**
+   * 右侧下拉图片高度
+   */
+  dropDownImageHeight: Length,
+
+  /**
+   * 右侧下拉图片宽度
+   */
+  dropDownImageWidth: Length,
+
+  /**
+   * 右侧下拉图片背景颜色
+   */
+  dropDownImageBackgroundColor: ResourceColor,
+
+  /**
+   * 右侧下拉图片 Margin
+   */
+  dropDownImageMargin: Margin | Length
+}
+
+/**
+ * 显示的文本样式
+ */
+export interface TextInfo {
+  fontSize: Length
+  fontColor: ResourceColor
+}
+
+//下拉框配置
+export interface DropDownInfo {
+  fontSize: Length
+  fontColor: ResourceColor
+  backgroundColor: ResourceColor
+  height: Length
+  border?:BorderOptions
+}
+
+/**
+ * 自定义输入框配置，不传则不显示
+ */
+export interface TextInputInfo {
+  placeholder: string,
+  text: string,
+  height: Length
+
+}

commons/basic/src/main/ets/utils/YTBreakPoint.ets

@@ -7,6 +7,10 @@ interface BreakPointTypeOption<T> {
   lg?: T
 }
 
+export interface BreakPointSize {
+  width: number,
+  height: number
+}
 
 export class BreakPointType<T> {
   private readonly options: BreakPointTypeOption<T>
@@ -38,9 +42,11 @@ export class YTBreakPoint {
    * @description 断点KEY值 使用BreakPointString类型代替string,限制非法输入
    */
   static readonly KEY = 'bp'
+  static readonly BreakPointVp = 'BreakPointVp'
 
-  static setBreakPoint(width: number) {
+  static setBreakPoint(width: number, height: number) {
     const vpWidth = px2vp(width)
+    const vpHeight = px2vp(height)
     let bp: BreakPointString = 'xs'
     if (vpWidth < 320) {
       bp = 'xs'
@@ -52,6 +58,7 @@ export class YTBreakPoint {
       bp = 'lg'
     }
     AppStorage.setOrCreate<BreakPointString>(YTBreakPoint.KEY, bp)
+    AppStorage.setOrCreate<BreakPointSize>(YTBreakPoint.BreakPointVp, { width: vpWidth, height: vpHeight })
   }
 
   static getBreakPoint() {

products/entry/src/main/ets/entryability/EntryAbility.ets

@@ -100,9 +100,10 @@ export default class EntryAbility extends UIAbility {
         }
       })
       const windowWidth = windowClass.getWindowProperties().windowRect.width
-      YTBreakPoint.setBreakPoint(windowWidth)
+      const windowHeight= windowClass.getWindowProperties().windowRect.height
+      YTBreakPoint.setBreakPoint(windowWidth,windowHeight)
       windowClass.on('windowSizeChange', size => {
-        YTBreakPoint.setBreakPoint(size.width)
+        YTBreakPoint.setBreakPoint(size.width,size.height)
         AppStorage.setOrCreate(AppStorageKeyCollect.SCREEN_WIDTH, px2vp(size.width))
         AppStorage.setOrCreate(AppStorageKeyCollect.SCREEN_HEIGHT, px2vp(size.height))
       })