HarmonyOS鸿蒙Next中Radio和Checkbox清空选项

HarmonyOS鸿蒙Next中Radio和Checkbox清空选项

@Entry @Component export struct GetConditionPage { @State gender: string = ‘’; @State sAge: string = ‘’; @State eAge: string = ‘’; @State ageRange: string[] = []; @State degreeList: string[] = []; @State degreeSelected: string[] = [];

aboutToAppear(): void { for (let index = 0; index < 65; index++) { this.ageRange.push(index.toString()); } this.degreeList = [‘博士’, ‘硕士’, ‘学士’]; }

build() { Column() { Row({ space: 10 }) { Scroll() { Column() { Row() { Column({ space: 10 }) { Text(‘性别：’).classDes1() }.width(‘10%’) Column({ space: 10 }) { genderRadio({ gender: $gender }) }.width(‘90%’) .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Start) }.backgroundColor(’#e7e9e8’).height(40) Row() { Column({ space: 10 }) { Text(‘年龄：’).classDes1() }.width(‘10%’) Column({ space: 10 }) { ageRange({ sAge: $sAge, eAge: $eAge, ageRange: $ageRange }) }.width(‘90%’) .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Start) }.height(40) Row() { Column({ space: 10 }) { Text(‘全日制学位：’).classDes1() }.width(‘10%’) Column({ space: 10 }) { degreeCheckBox({ degreeList: $degreeList, degreeSelected: $degreeSelected }) }.width(‘90%’) .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Start) }.backgroundColor(’#e7e9e8’).height(40) } }.width(‘100%’) .height(‘100%’) .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向 .scrollBar(BarState.Auto) // 滚动条常驻显示 .scrollBarColor(Color.Gray) // 滚动条颜色 .edgeEffect(EdgeEffect.Fade) }.width(‘100%’).height(‘92%’).backgroundColor(Color.White)

  Divider().strokeWidth(2) // 设置横线的宽度
  Row({ space: 10 }) {
    Column({ space: 10 }) {
      Text('清空').fontSize(14)
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .fontColor('#006F6A')
    }.width('50%').height('100%')
      .onClick(() => {
        this.cleanCondition();
      })

    Column({ space: 10 }) {
      Text('查询').fontSize(14)
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
    }.width('50%').height('100%')
      .backgroundColor('#00afad')
      .onClick(() => {
        this.getConditionEmpList();
      })

  }.width('100%').height('8%').backgroundColor(Color.White)
}.backgroundColor(Color.Transparent)
  .alignItems(HorizontalAlign.Center).width('100%').height('100%').backgroundColor(Color.White)

}

cleanCondition() { this.gender = ‘’; this.sAge = ‘’; this.eAge = ‘’; this.degreeSelected = [];

}

getConditionEmpList() { console.log(‘性别：’ + this.gender) console.log(‘年龄开始：’ + this.sAge) console.log(‘年龄结束：’ + this.eAge) console.log(‘学位：’ + JSON.stringify(this.degreeSelected))

} }

@Extend(Text) function classDes1() { .fontSize(14) .fontWeight(FontWeight.Normal) .fontColor("#000000") .width(‘100%’) .height(‘100%’) .textAlign(TextAlign.End) }

@Extend(Text) function classDes2() { .fontSize(14) .fontWeight(FontWeight.Normal) .fontColor("#000000") .width(‘100%’) .height(‘100%’) .textAlign(TextAlign.Start) }

@Component struct genderRadio { @Link gender: string; build() { Row({ space: 10 }) { Column() { Radio({ value: ‘男’, group: ‘radioGender’ }) .checked(false) .radioStyle({ checkedBackgroundColor: ‘#00afad’ }) .height(15) .width(15) .onChange((isChecked: boolean) => { this.gender = ‘男’; }) }.width(‘15’) Column() { Text(‘男’).classDes2() }.width(‘50’)

  Column() {
    Radio({ value: '女', group: 'radioGender' })
      .checked(false)
      .radioStyle({
        checkedBackgroundColor: '#00afad'
      })
      .height(15)
      .width(15)
      .onChange((isChecked: boolean) => {
        this.gender = '女';
      })
  }.width('15')
  Column() {
    Text('女').classDes2()
  }.width('50')
}.margin({ left: 20 })

} }

@Component struct ageRange { @Link sAge: string; @Link eAge: string; @Link ageRange: string[];

build() { Row({ space: 10 }) { Column() { Button(this.sAge.toString()).width(‘70’).height(‘30’).backgroundColor(’#c9ccd0’) .fontColor(Color.Black).fontSize(14) .onClick(() => { TextPickerDialog.show({ range: this.ageRange, value: this.sAge, onAccept: (result) => { if (result.value.toString() === ‘0’) { this.sAge = ‘’; } else { this.sAge = result.value.toString() } } }) }) }.width(‘100’)

  Column() { Text('岁（含）到').classDes2() }.width('70')

  Column() {
    Button(this.eAge).width('70').height('30').backgroundColor('#c9ccd0')
    .fontColor(Color.Black).fontSize(14)
    .onClick(() => {
      TextPickerDialog.show({
        range: this.ageRange,
        value: this.eAge,
        onAccept: (result) => {
          if (result.value.toString() === '0') {
            this.eAge = '';
          } else {
            this.eAge = result.value.toString()
          }
        }
      })
    })
  }.width('100')
  Column() { Text('岁').classDes2() }
}

} }

@Component struct degreeCheckBox { @Link degreeSelected: string[]; @Link degreeList: string[]; build() { Row({ space: 10 }) { ForEach(this.degreeList, (item: string) => { Column() { Checkbox({ name: item.toString(), //拿到的数据赋值给name group: ‘degree’ //群组名称 }).width(‘15’) .selectedColor(’#00afad’) .shape(CheckBoxShape.CIRCLE) .onChange((value: boolean) => { if (value) { // 如果多选框被选中，将该选项添加到选中列表中 if (!this.degreeSelected.includes(item)) { this.degreeSelected.push(item); } } else { // 如果多选框被取消选中，将该选项从选中列表中移除 const index = this.degreeSelected.indexOf(item); if (index > -1) { this.degreeSelected.splice(index, 1); } } }) }.width(‘15’) Column() { Text(item).classDes2() }.width(‘50’) }) }.margin({ left: 20 }) } }