综合练习（循环，数组）

ListLtem使用方法：

用ListLtem前必须使用List，它是用来展示列表具体item.而且要使用只能放一个.

List使用方法：

它是列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

之后再用ForEach然后再用ListLtem.

自定义组件：

用@Builder DeleteButton之后再用Row(沿水平方向布局容器)可加图片，有两种一个左侧划，一个右侧划，这是隐藏的删除件。使用前得声明。

.swipeAction（用于设置ListItem的划出组件）({

start:this.DeleteButton(index)（左侧划）

end:this.DeleteButton(index)（右侧划）

})

示例：

@Entry
@Component
struct ListLtemPage {
  @State message: string = 'Hello World';
  @State task:number[]=[1,2,3,4,6,7,8,9,10]
  build() {
    Column() {
      List({space:10}){
      ForEach(this.task,(n:number,index)=>{
        ListItem(){
     Row(){
       Text(`任务`)
       Text(`${n}`)
     }
       .width('90%').height(60).backgroundColor('#fff')
       .borderRadius(30).border({width:1,color:'red'})
   }
   .swipeAction({
     start:this.DeleteButton(index),
     end:this.DeleteButton(index)
   })
 })
 }
      .height('80%')
      .width('100%')
      .backgroundColor('#ccc')
      .alignListItem(ListItemAlign.Center)

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


//自定义组件
  @Builder DeleteButton(index:number){
  Row(){
    Button({type:ButtonType.Circle}){
      Image($r('app.media.icons')).height(30)
    }.width(50).height(50).backgroundColor(Color.Pink)
    .onClick(()=>{
      this.task.splice(index,1)
    })
  }
  }

}

之后使用DevEcoStudio之前得有模拟器，之后跳转,跳转前咱用上一段方法写代码之后运用一些循环.得写两页面.然后找到列表里头的resources找到profile里头main开头的。之后跳转成不成功就看模拟器运行没。用模拟器前上方有绿三角形点一下在运用

示列：

import { promptAction, router } from '@kit.ArkUI';//导包

@Entry
@Component
struct Index {
  @State message: string = '学生管理信息';
  @State account:string[]=['admin','zhanghao','list']
  @State pwds:string[]=['123456','654321','123456']
  @State acc:string='';
  @State pwd:string='';
  build() {
    Column({space:30}) {
  Text(`${this.message}`).fontSize(30)
      TextInput({placeholder:'请输入信息'})
        .onChange(val=>{
          this.acc=val
        })
      TextInput({placeholder:'请输入密码'}).type(InputType.Password)
        .onChange(val=>{
          this.pwd=val
        })
      Button('登录').width('80%')
        .onClick(()=>{
  if(this.acc==''||this.pwd==''){
  promptAction.showToast({message:'账号密码不能为空'})
}else {
     let flag:boolean=false;//默认登录失败
    for(let i:number=0;i<=this.account.length;i++){
      if(this.account[i]===this.acc&&this.pwd==this.pwds[i]){
        //用户密码相同
        flag=true//登录成功
        break;
      }
    }
    if(flag){
      //登录成功
   router.pushUrl({
     url:"pages/StuShowPage"
   })
    }else {
      promptAction.showToast({message:'账号密码错误'})
    }
  }

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

跳转后成功后可以写代码了.

示例：

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]
  @State ages:number[]=[18,19,18,16,23,21]
  @State zys:string[]=['h5','java','h5','python','c++','c#']
  @State clas:string[]=['01','02','03','09','11','12']
  @State tels:string[]=['13828238091','13828230987','13823458091','13828238078','13828238034','13828238099']


  @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=1)=>{
  ListItem(){
Column(){
Row(){
  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:"#ccc",width:1}).backgroundColor(Color.Pink)

 }.swipeAction({
    end:this.DeleteBt(index)
  })
})
 }.alignListItem(ListItemAlign.Center)
      .height(500)
      //提供分隔器组件，分隔不同内容块/内容元素。
       Divider().color('#ccc').strokeWidth(3)
  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('40%').borderRadius(0)
    .onChange(val=>{
      this.tel=val
    })
}.width('100%').height(50)
.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//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.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.icons')).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:"删除成功!"})
    })
  }
}

代码跳转前效果

跳转之后，模拟器运行一样那就对了