#跟着若城学鸿蒙# HarmonyOS NEXT学习之Select案例一：基础用法与表单交互

一、案例介绍

本案例将展示Select组件的基础用法和表单交互功能，通过一个用户信息表单的示例，帮助开发者快速掌握Select组件的核心特性。

二、代码实现

@Entry
@Component
struct SelectBasicExample {
  @State formData: {
    gender: string
    education: string
    city: string
  } = {
    gender: '',
    education: '',
    city: ''
  }

  @State genderIndex: number = -1
  @State educationIndex: number = -1
  @State cityIndex: number = -1

  private readonly genderOptions: string[] = ['男', '女']
  private readonly educationOptions: string[] = ['高中', '专科', '本科', '硕士', '博士']
  private readonly cityOptions: string[] = ['北京', '上海', '广州', '深圳', '杭州']

  build() {
    Column() {
      Text('用户信息表单')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      // 性别选择
      Row() {
        Text('性别：')
          .fontSize(16)
          .width(80)
        Select({
          value: this.formData.gender || '请选择性别',
          selected: this.genderIndex,
          options: this.genderOptions
        })
          .width('70%')
          .height(40)
          .backgroundColor('#F5F5F5')
          .borderRadius(8)
          .onSelect((index: number) => {
            this.genderIndex = index
            this.formData.gender = this.genderOptions[index]
          })
      }
      .width('100%')
      .margin({ bottom: 20 })

      // 学历选择
      Row() {
        Text('学历：')
          .fontSize(16)
          .width(80)
        Select({
          value: this.formData.education || '请选择学历',
          selected: this.educationIndex,
          options: this.educationOptions
        })
          .width('70%')
          .height(40)
          .backgroundColor('#F5F5F5')
          .borderRadius(8)
          .onSelect((index: number) => {
            this.educationIndex = index
            this.formData.education = this.educationOptions[index]
          })
      }
      .width('100%')
      .margin({ bottom: 20 })

      // 城市选择
      Row() {
        Text('城市：')
          .fontSize(16)
          .width(80)
        Select({
          value: this.formData.city || '请选择城市',
          selected: this.cityIndex,
          options: this.cityOptions
        })
          .width('70%')
          .height(40)
          .backgroundColor('#F5F5F5')
          .borderRadius(8)
          .onSelect((index: number) => {
            this.cityIndex = index
            this.formData.city = this.cityOptions[index]
          })
      }
      .width('100%')
      .margin({ bottom: 20 })

      // 提交按钮
      Button('提交')
        .width('100%')
        .height(50)
        .backgroundColor('#007DFF')
        .borderRadius(8)
        .fontSize(18)
        .fontColor(Color.White)
        .onClick(() => {
          this.submitForm()
        })

      // 表单数据预览
      if (this.isFormFilled()) {
        Column() {
          Text('表单数据预览')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .margin({ top: 30, bottom: 10 })

          Text(`性别：${this.formData.gender}`)
            .fontSize(16)
            .margin({ bottom: 8 })

          Text(`学历：${this.formData.education}`)
            .fontSize(16)
            .margin({ bottom: 8 })

          Text(`城市：${this.formData.city}`)
            .fontSize(16)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F5F5F5')
        .borderRadius(8)
        .margin({ top: 20 })
      }
    }
    .width('100%')
    .height('100%')
    .padding(16)
  }

  private isFormFilled(): boolean {
    return this.formData.gender !== '' &&
      this.formData.education !== '' &&
      this.formData.city !== ''
  }

  private submitForm() {
    if (!this.isFormFilled()) {
      AlertDialog.show({
        title: '提示',
        message: '请填写完整的表单信息',
        confirm: {
          value: '确定',
          action: () => {
            // 关闭对话框
          }
        }
      })
      return
    }

    // 处理表单提交
    console.info('表单数据：', JSON.stringify(this.formData))
    AlertDialog.show({
      title: '成功',
      message: '表单提交成功',
      confirm: {
        value: '确定',
        action: () => {
          // 重置表单
          this.resetForm()
        }
      }
    })
  }

  private resetForm() {
    this.formData = {
      gender: '',
      education: '',
      city: ''
    }
    this.genderIndex = -1
    this.educationIndex = -1
    this.cityIndex = -1
  }
}

三、总结

在表单交互方面，通过多个 Select 组件实现了性别、学历和城市的选择，并通过状态管理（如 @State 管理表单数据和选中索引），确保了表单数据的实时更新。通过提交按钮触发表单验证和提交逻辑，确保用户填写了完整的表单信息。这种设计不仅展示了 Select 组件的灵活性和易用性，还提供了丰富的交互效果，开发者可以参考此案例，快速实现类似的表单交互功能。