数组与循环综合练习

数组与循环综合练习

新组件

list(){}:

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据

ForEach(数组，(元素名称，下标)=>{循环体})

ForEach(this.names,(name:string,index:number)=>{
  ListItem(){//只能放一个组件
   Row(){
     Text(name).fontSize(30)
     Text(`${this.names.length}`).fontSize(30)
   }
  }
})

ListItem(){}

只能放一个组件

自定义组件：@Builder

@Builder
  DeleteBt(index: number) {
    Button({ type: ButtonType.Normal }) {
      Image($rawfile('icons.png')).height(50).interpolation(ImageInterpolation.High)
    }.height(102).width(100)
    .onClick(() => {
      this.ids.splice(index, 1)
      this.names.splice(index, 1)
      this.sexs.splice(index, 1)
      this.ages.splice(index, 1)
      this.zys.splice(index, 1)
      this.clas.splice(index, 1)
      this.tels.splice(index, 1)
      promptAction.showToast({ message: "删除成功" })
    })
  }
}

提供分割噐组件，分隔不同内容块/内容元素

Divider()

Divider().color(‘#ffffa7a7’).strokeWidth(2)

跳转页面

router.pushUrl({
  //跳转路径在->profile->main_pages.json
  url: 'pages/StuShowPage'
})

案例：学生信息展示

import { promptAction } from '@kit.ArkUI';
@Entry
@Component
struct StuShowPage {
  @State message: string = '学生信息展示';
  @State ids: number[] = [1, 2, 3, 4, 5, 6]
  @State names: string[] = ['张三', '小明', '小红', '赵四', '小兰', '小李']
  @State sexs: number[] = [0, 1, 0, 1, 0, 1] //0女生  1男生
  @State ages: number[] = [18, 19, 17, 19, 19, 23]
  @State zys: string[] = ['h5', 'java', 'h5', 'python', 'c++', 'c#']
  @State clas: string[] = ["01", '02', '03', '04', '05', '06']
  @State tels: string[] = ['12345643254', '15748482902', '98787865432', '98765432654', '09876767875', '23456765435']
  @State id1: number = 0
  @State name: string = ''
  @State sex: number = 0
  @State age: number = 0
  @State zy: string = ''
  @State cla: string = ''
  @State tel: string = ''

  build() {
    Column() {
      Text(`${this.message}`).fontSize(30)
      List({ space: 10 }) {
        ForEach(this.ids, (id1: number, index) => {
          ListItem() {
            Column() {
              Row({ space: 20 }) {
                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('100%').height(50).justifyContent(FlexAlign.SpaceAround)
            }.width('95%').border({ color: "#fffac5c5", width: 1 }).backgroundColor("#ffffe7e7")
          }.swipeAction({
            end: this.DeleteBt(index)
          })
        })
      }
      .alignListItem(ListItemAlign.Center)
      .height(500)
      //提供分割噐组件，分隔不同内容块/内容元素
      Divider().color('#ffffa7a7').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" })
              .onChange(isChecked => this.sex = 1)
            Text(`男`)
          }

          Column() {
            Radio({ value: `0  `, group: "sex" }).checked(true)
              .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('25%').borderRadius(0)
          .onChange(val => {
            this.tel = val
          })
      }.width('100%').height(80).justifyContent(FlexAlign.SpaceAround).alignItems(VerticalAlign.Center)


      Button(`添加`).width('90%').margin({ top: 10 })
        .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//id重复
                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.zys.push(this.zy)
              this.clas.push(this.cla)
              this.tels.push(this.tel)
              promptAction.showToast({message:'添加成功！'})
            }
          }
        })


    }
    .height('100%')
    .width('100%')
  }

  @Builder
  DeleteBt(index: number) {
    Button({ type: ButtonType.Normal }) {
      Image($rawfile('icons.png')).height(50).interpolation(ImageInterpolation.High)
    }.height(102).width(100)
    .onClick(() => {
      this.ids.splice(index, 1)
      this.names.splice(index, 1)
      this.sexs.splice(index, 1)
      this.ages.splice(index, 1)
      this.zys.splice(index, 1)
      this.clas.splice(index, 1)
      this.tels.splice(index, 1)
      promptAction.showToast({ message: "删除成功" })
    })
  }
}