循环与数组综合练习
自定义组件
@Builder DeleteButton(index:number){
Row(){
Button({type:ButtonType.Circle}){
Image($r('app.media.icons'))
.height(30)
}
.width(50)
.height(50)
.onClick(()=>{
this.task.splice(index,1)
})
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)
})
})
}
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
List(){
// (数组,(元素名称,下标)=>{循环体})
ForEach(this.names,(name:string,index:number)=>{
// ListItem只能放一个组件
ListItem(){
Row(){
Text(name).fontSize(30)
Text(`${this.names.length}`).fontSize(30)
}
}
})
}
跳转页面
跳转页面
router.pushUrl({
url:'pages/StuShowPage'
})
import { promptAction, router } from '@kit.ArkUI';//导包
@Entry
@Component
struct Index {
@State message: string = '学生管理系统';
@State accout:string[]=['admin','zhangsan','lisi']
@State pwds:string[]=['123456','654321','111111']
@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.accout.length;i++){
if(this.accout[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%')
}
}
分割器
提供分割器组件,分隔不同内容块/内容元素 相当于<hr>
Divider().color('#aaa').strokeWidth(3)
滑动删除
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)
})
})
}
自定义组件
@Builder DeleteButton(index:number){
Row(){
Button({type:ButtonType.Circle}){
Image($r('app.media.icons'))
.height(30)
}
.width(50)
.height(50)
.onClick(()=>{
this.task.splice(index,1)
})
}
}
练习
@Entry
@Component
struct ListItemPage {
@State message: string = 'Hello World';
@State task:number[]=[1,2,3,4,5,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)
.onClick(()=>{
this.task.splice(index,1)
})
}
}
}
import { promptAction, router } from '@kit.ArkUI';//导包
@Entry
@Component
struct Index {
@State message: string = '学生管理系统';
@State accout:string[]=['admin','zhangsan','lisi']
@State pwds:string[]=['123456','654321','111111']
@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.accout.length;i++){
if(this.accout[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]//0女 1男
@State ages:number[]=[12,23,34,45,56,67]
@State zys:string[]=['h5','java','h5','python','c++','c#']
@State clas:string[]=['01','02','03','09','11','12']
@State tels:string[]=['12345678901','23456789012','12345678905','12345678903','12345678991','12345678968']
@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(){
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('#eee')
}.swipeAction({
end:this.DeleteBt(index)
})
})
}
.alignListItem(ListItemAlign.Center)
.height(500)
// 提供分割器组件,分隔不同内容块/内容元素 相当于<hr>
Divider().color('#aaa').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'})
.onChange(isChecked=>this.sex=0)
.checked(true)//默认选中
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:'删除成功!'})
})
}
}
1677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
