数组与循环的综合应用

ustifyContent(FlexAlign.SpaceAround)  均匀分布
.alignItems(VerticalAlign.Center)    垂直对齐
 promptAction.showToast({message:"学号不能重复"}) 提示
end:this.DeleteBt(index)  左滑删除

学生信息

build() {
    Column() {
      Text(`${this.message}`).fontSize(30)
      List({space:10}){
        ForEach(this.ids,(id1:number,index)=>{
          ListItem(){
            Column(){
              Row({space:23}){
                Text(`学号:${id1}`)
                Text(`姓名:${this.names[index]}`)
                Text(`性别:${this.sexs[index]===0?'女':'男'}`)
                Text(`年龄:${this.ages[index]}`)
              }.width('100%').height(50).justifyContent(FlexAlign.SpaceAround)
              Row(){
                Text(`专业:${this.zys[index]}`)
                Text(`班级:${this.clas[index]}`)
                Text(`电话:${this.tels[index]}`)
              }.width('95%').border({color:'red',width:1}).backgroundColor('green')
              .width('100%').height(50).justifyContent(FlexAlign.SpaceAround)
            }
          }.swipeAction({
            end:this.DeleteBt(index)
          })
        })
      }.alignListItem(ListItemAlign.Center)
  .height(500)
    //
      Divider().color('#ccc').strokeWidth(2)
      Row(){
          TextInput({placeholder:'学号'}).width('20%').borderRadius(0)
            .onChange(val=>{
              this.id1=parseInt(val)
            })
        TextInput({placeholder:'姓名'}).width('20%').borderRadius(0)
          .onChange(val=>{
            this.name=val
          })
        TextInput({placeholder:'年龄'}).width('20%').borderRadius(0)
          .onChange(val=>{
            this.age=parseInt(val)
          })
        Row(){
            Text('性别')
          Column(){
              Radio({value:'1',group:'sex'}).checked(true)
                .onChange(isChecked=>this.sex=1)
            Text("男")
          }
          Column(){
            Radio({value:'0',group:'sex'})
              .onChange(isChecked=>this.sex=0)
            Text("女")
          }

        }.width('30%')
      }.width('100%').height(80)
      .justifyContent(FlexAlign.SpaceAround)
    .alignItems(VerticalAlign.Center)
      Row(){
        TextInput({placeholder:"专业"}).width('25%').borderRadius(0)
          .onChange(val=>{
            this.zy=val
          })
        TextInput({placeholder:"班级"}).width('25%').borderRadius(0)
          .onChange(val=>{
            this.cla=val
          })
        TextInput({placeholder:"电话"}).width('40%').borderRadius(0)
          .onChange(val=>{
            this.tel=val
          })
      }.width('100%').height(80)
      .justifyContent(FlexAlign.SpaceAround)
      .alignItems(VerticalAlign.Center)
      Button("添加").width('90%').margin({top:20}).type(ButtonType.Normal)
        .onClick(()=>{
          if(this.id1==0||this.name===''||this.age==0
            ||this.zy==''||this.cla==''||this.tel==''){
            promptAction.showToast({message:'数据不能为空'})
          }else{
            let isId:boolean=false;
            for(let i:number=0;i<this.ids.length;i++){
              if(this.ids[i]==this.id1){
                isId=true
                break
              }
            }
            if(isId){
              promptAction.showToast({message:"学号不能重复"})
            }else{
              this.ids.push(this.id1)
              this.names.push(this.name)
              this.sexs.push(this.sex)
              this.ages.push(this.age)
              this.clas.push(this.cla)
              this.zys.push(this.zy)
              this.tels.push(this.tel)
              promptAction.showToast({message:"添加成功！"})
            }
          }
        })
}
    .height('100%')
    .width('100%')
  }
  @Builder DeleteBt(index:number){//
  Button({type:ButtonType.Normal}){
    Image($r('app.media.app_icon')).height(50).interpolation(ImageInterpolation.High)
  }.height(102).width(100)
    .onClick(()=>{
      this.ids.splice(index,1)
      this.names.splice(index,1)
      this.ages.splice(index,1)
      this.sexs.splice(index,1)
      this.clas.splice(index,1)
      this.zys.splice(index,1)
      this.tels.splice(index,1)
      promptAction.showToast({message:'删除成功！'})
    })
  }
}