HarmonyOS NEXT开发组件分享–省市区组件

​ 一、整体演示

二、技术实现

省市区组件 可选择省市区

组件定义： 使用ArkTS（HarmonyOS应用开发语言）定义省市区组件，包括数据结构、UI布局和事件处理逻辑。 数据绑定： 组件通过数据绑定机制，将用户选择的结果与应用中的其他部分进行关联。 当用户选择发生变化时，相关数据会自动更新。 事件处理： 组件支持多种事件处理机制，如点击事件、触摸事件等。 开发者可以根据需要，为组件添加事件监听器，处理用户交互。 样式定制： 组件提供丰富的样式定制选项，如字体大小、颜色、边框等。 开发者可以根据应用的整体风格，对组件进行个性化定制。 三、应用场景

电商应用： 在收货地址填写页面中，使用省市区组件方便用户选择收货地址。 生活服务应用： 在发布或查询本地服务时，使用省市区组件帮助用户定位服务区域。 旅游应用： 在旅游目的地选择页面中，使用省市区组件帮助用户选择旅游目的地。 四、源码如下：

import { AreaItem, fetchProvinces } from '../api/areaApi'

@Component
export struct AreaPicker {
  @State provinces: AreaItem[] = []
  @State cities: AreaItem[] = []
  @State districts: AreaItem[] = []
  
  @State selectedProvince: AreaItem | null = null
  @State selectedCity: AreaItem | null = null
  @State selectedDistrict: AreaItem | null = null
  
  @State isLoading: boolean = false
  
  aboutToAppear() {
    this.loadProvinces()
  }
  
  async loadProvinces() {
    this.isLoading = true
    try {
      this.provinces = await fetchProvinces()
    } catch (error) {
      console.error('加载省份数据失败:', error)
    } finally {
      this.isLoading = false
    }
  }
  
  build() {
    Column() {
      if (this.isLoading) {
        LoadingProgress()
          .width(50)
          .height(50)
      } else {
        Row() {
          Column() {
            Text('省份')
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .margin({ bottom: 10 })
            
            List() {
              ForEach(this.provinces, (province: AreaItem) => {
                ListItem() {
                  Text(province.name)
                    .fontSize(14)
                    .padding(10)
                    .width('100%')
                    .backgroundColor(this.selectedProvince?.code === province.code ? '#e6f7ff' : '#fff')
                    .onClick(() => {
                      this.selectedProvince = province
                      this.cities = province.children || []
                      this.selectedCity = null
                      this.districts = []
                      this.selectedDistrict = null
                    })
                }
              })
            }
            .width('100%')
            .height(300)
          }
          .width('33%')
          .height(350)
          .backgroundColor('#fff')
          .borderRadius(8)
          .padding(10)
          
          Column() {
            Text('城市')
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .margin({ bottom: 10 })
            
            List() {
              ForEach(this.cities, (city: AreaItem) => {
                ListItem() {
                  Text(city.name)
                    .fontSize(14)
                    .padding(10)
                    .width('100%')
                    .backgroundColor(this.selectedCity?.code === city.code ? '#e6f7ff' : '#fff')
                    .onClick(() => {
                      this.selectedCity = city
                      this.districts = city.children || []
                      this.selectedDistrict = null
                    })
                }
              })
            }
            .width('100%')
            .height(300)
          }
          .width('33%')
          .height(350)
          .backgroundColor('#fff')
          .borderRadius(8)
          .padding(10)
          .margin({ left: 10 })
          
          Column() {
            Text('区县')
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .margin({ bottom: 10 })
            
            List() {
              ForEach(this.districts, (district: AreaItem) => {
                ListItem() {
                  Text(district.name)
                    .fontSize(14)
                    .padding(10)
                    .width('100%')
                    .backgroundColor(this.selectedDistrict?.code === district.code ? '#e6f7ff' : '#fff')
                    .onClick(() => {
                      this.selectedDistrict = district
                    })
                }
              })
            }
            .width('100%')
            .height(300)
          }
          .width('33%')
          .height(350)
          .backgroundColor('#fff')
          .borderRadius(8)
          .padding(10)
          .margin({ left: 10 })
        }
        .width('100%')
        
        Row() {
          Text('已选择：')
            .fontSize(14)
          Text(this.selectedProvince?.name || '-')
            .fontSize(14)
          Text(this.selectedCity?.name ? ' / ' + this.selectedCity?.name : '')
            .fontSize(14)
          Text(this.selectedDistrict?.name ? ' / ' + this.selectedDistrict?.name : '')
            .fontSize(14)
        }
        .margin({ top: 20 })
      }
    }
    .width('100%')
    .padding(20)
    .backgroundColor('#f5f5f5')
  }
} 

​