鸿蒙OS ArkTS 省市县级联选择框,封装组件

背景:

公司现在要开发纯血鸿蒙版本APP,我被抽调过来做点功能。现在要做一个省市县级联选择框,并且要封装为组件,供其他页面模块使用。

效果图:

难点:

  1. 现在官方文档上只是查到了TextPicker组件是可以做这样级联选择的效果

  2. 这种弹窗,官方文档上是有半模态转场,只是这个半模态是一个严格和宿主节点绑定在一起的弹窗,需要绑定在触发的地方,才可以触发弹出,而且半模态转场中的bindSheet,需要初始化Builder类型装饰器(即模态框中要展示的内容),只是Builder装饰器不允许在组件外调用。

实现:

  1. 创建一个组件,组件中内容包括选择器所需要的数据数组、选择器TextPicker所在的Builder装饰器,在TextPicker中去实现级联效果、组件build主体;通过状态(Link、State)来实现在目标页面调用选择器组件

  2. 数据数组包括省市县的数据,可以静态写,也可以读取数据文件,我这是读的他们提供的地区xml文件

  3. Builder装饰器是半模态专场初始化时的模态框中的内容,其中包括弹框顶部 "取消"、弹窗标题、"确定"布局和事件,下边的省市县三级选择器

javascript 复制代码
@Builder
  selectRegion() {
    Column() {
      Flex({
        justifyContent: FlexAlign.SpaceBetween,
        alignItems: ItemAlign.Center
      }) {
        Text($r('app.string.cancel_txt'))
          .width('36lpx')
          .fontColor('#4976EE')
          .onClick(() => {
            this.showSheet = false;
          })

        Text(this.title)
          .fontColor('#000')
          .fontSize(18)
          .fontWeight(600)

        Text($r('app.string.ok_txt'))
          .width('36lpx')
          .fontColor('#4976EE')
          .onClick(() => {
            this.showSheet = false;
            if (this.okCallback) {
              this.okCallback(this.values);
            }
          })
      }
      .width('92%')
      .height('36lpx')
      .margin({ left: '4%', right: '4%', top: '6lpx' })

      TextPicker({
        range: this.range, //['北京', '北京市', '东城区']
        selected: $$this.selected, //[0, 0, 0]
      })
        .canLoop(false)// 不要循环
        .onChange((values) => {
          //进行防抖处理,防止滚动期间多次发送请求
          clearTimeout(this.timeId)
          this.timeId = setTimeout(async () => {
            let p = this.getProvince(values[0]);
            //当省份被改变
            if (this.values[0] !== values[0]) {

              this.range[1] = this.getCityArray(p.city) //市
              this.range[2] = this.getDistrictArray(p.city) //区

              //当省份发生变化需要把城市置零,当城市发生变化需要把地区置零
              this.selected[1] = 0
              this.selected[2] = 0

              //内容页面展示需要同步
              this.values[0] = values[0]
              this.values[1] = this.range[1][0]
              this.values[2] = this.range[2][0]

              //当城市被改变
            } else if (this.values[1] !== values[1]) {
              this.range[2] = this.getDistrictArrayByName(values[1], p.city) //区

              //当城市发生变化需要把地区置零
              this.selected[2] = 0

              //内容页面展示需要同步
              this.values[1] = values[1]
              this.values[2] = this.range[2][0]

              //当地区被改变
            } else if (this.values[2] !== values[2]) {

              //内容页面展示需要同步
              this.values[2] = values[2]
            }

          }, 100)
        })
    }

  }
  1. 组件build主体,是封装的组件主体,是将来要放到要使用此组件的页面中的。在此主体中,绑定初始了半模态框,并定义了半模态框的一些样式
javascript 复制代码
build() {
    Column()
      .bindSheet($$this.showSheet, this.selectRegion(), {
        height: 260,
        showClose: false,
        shouldDismiss: ((sheetDismiss: SheetDismiss) => {
          console.log("bind sheet shouldDismiss")
          //sheetDismiss.dismiss()
        }),
        onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {

        })
      })
  }

5.组件中状态和回调函数

javascript 复制代码
  @Link range: string[][] //TextPicker的values数组 [[], [], []]
  @Link selected: number[] //TextPicker的index数组
  @Link values: string[] //选中后用于展示的数组 ['北京', '北京市', '东城区']
  @Link showSheet: boolean; //半模态框
  @Link title: string;
  timeId: number = -1 //防抖处理的延时器Id
  private okCallback?: (values: string[]) => void

6.在页面中引入并触发显示弹框组件

javascript 复制代码
import { AreaRegion } from '../../model/AreaRegion'

......

 @State isShowSelectRegion: boolean = false;

 showAreagion() {
        this.isShowSelectRegion = true;
  }

build() {
    Column() {
      ......
      AreaRegion({
        showSheet: $isShowSelectRegion,
        title: $regionSelectTitle,
        values: $regionData,
        selected: $regionSelected,
        range: $regionRange,
        okCallback: (values) => {
          /*更新账号所属地区*/
          let region = values[0] + values[1] + values[2]
          console.info(region)
          }).catch((msg: string) => {

          })
        }
      });

        Button('选择省市区')
          .width('60%')
          .margin({ left: '20%' })
          .fontColor('#fff')
          .fontSize('22fp')
          .backgroundColor('#2E74FE')
          .onClick(() => {
             this.showAreagion();
          })

    }
}

7。这种做法感觉不是那么标准,因为是要在所使用的页面UI中先加载AreaRegion组件,然后再通过改变@State变量,传递到组件中,实现组件的展示与否。不过现在暂时没有想到其他方案,如果好办法,欢迎交流。

8.注意文中所贴代码不是全部的代码,可以参考这种方式以及重要实现步骤。

相关推荐
️ 邪神5 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
鸿蒙自习室18 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu720 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
郝晨妤2 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
Peace*2 天前
HarmonyOs鸿蒙开发实战(16)=>沉浸式效果第一种方案一窗口全屏布局方案
harmonyos·鸿蒙·鸿蒙系统
遇到困难睡大觉哈哈2 天前
ArkTS组件结构和状态管理
鸿蒙
ChinaDragonDreamer2 天前
HarmonyOS:UIAbility组件间交互(设备内)
开发语言·harmonyos·鸿蒙
ChinaDragonDreamer3 天前
HarmonyOS:使用常用组件构建页面
开发语言·harmonyos·鸿蒙
鸿蒙自习室4 天前
鸿蒙动画开发07——粒子动画
ui·华为·harmonyos·鸿蒙
少恭写代码4 天前
Taro首个支持鸿蒙的 UI 库,同时还兼容 React Native、小程序、H5
react native·鸿蒙·taro·duxapp