鸿蒙开发-状态+判断+循环

​🌈个人主页：前端青山
🔥系列专栏：鸿蒙开发篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来鸿蒙开发篇专栏内容:鸿蒙开发-状态+判断+循环

目录

1.状态1原始类型

2.引用类型

2.判断

3.循环

1.基本使用

2.key

4.练习

1.鸿蒙计算器

1.状态
1原始类型

@Entry@Componentstruct Index {@State num: number = 1build() {Column() {Text('num：' + this.num).fontSize(30)Button('+1').onClick(() => this.num++)}}}

2.引用类型

@State只会对引用数据类型的第一层赋予响应式数据的能力，嵌套的属性不具备响应式

• 铺垫案例

// interface Info {
//   name: string
//   child: {
//     name: string
//   }
// }
type Info = {name: string,child: {name: string}
}
@Entry
@Component
struct LearnState {@State message: string = 'Hello World'@State info: Info = {name: '张三',child: {name: '张三的孩子'}}build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Text('父亲名字：' + this.info.name)Text('孩子的名字：' + this.info.child.name)Button('修改父的名字为李四').onClick(() => {this.info.name = '李四'})Button('修改子的名字为李四的孩子').onClick(() => {// 响应式：只能观察到第一层的数据的变化// this.info.child.name = '李四的孩子' // 失去响应式this.info.child = { // 书写形式危险的name: '李四的孩子'}})}.width('100%')}.height('100%')}
}

实战案例：类型使用值得学习
 

// class Good {
//   constructor(public id: string, public title: string, public price: number){
//   }
// }
class Good {id: stringtitle: stringprice: numberconstructor(id: string, title: string, price: number){this.id = idthis.title = titlethis.price = price}
}@Entry
@Component
struct LearnGood {@State goods: Good[] = [new Good('1', '苹果', 2.5),new Good('2', '榴莲', 29.8),new Good('3', '苹果香蕉', 5.5)]build() {Row() {Column() {Text('榴莲价格' + this.goods[1].price)Button('修改榴莲价格为15.5').onClick(() => {// this.goods[1].price = 15.5 // 没有修改成功const item = this.goods[1]this.goods[1] = new Good(item.id, item.title, 15.5)})}.width('100%')}.height('100%')}
}

2.判断

ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。

@Entry
@Component
struct LearnIf {@State isShow: boolean = truebuild() {Row() {Column() {Button('切换').onClick(() => this.isShow = !this.isShow)if (this.isShow) {Text('出现')}// this.isShow ? Text('哈哈') : Text('嘻嘻') // 错误的Text(this.isShow ? '哈哈' : '嘻嘻')// switch (this.isShow) {//   case true://     Text('哈哈哈哈')//   default://     Text('嘻嘻嘻嘻')// }// switch case// 三元运算符 --- react中推荐使用三元运算符，不能直接写if else}.width('100%')}.height('100%')}
}

3.循环

为啥要有循环 =》 服务器返回数据 一般都是 数组里面是一个个对象 咱们需要通过循环挨个展示 v-for

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件

数组.forEach(   (item,i)=>{} )
ForEach(  数组,  (item,i)=>{  布局代码内置组件或者自定义组件  },  ㊙️ )ForEach(arr: Array,itemGenerator: (item: any, index?: number) => void,keyGenerator?: (item: any, index?: number) => string
)

1.基本使用

@Entry
@Component
struct LearnList {@State arr: string[] = ['one', 'two', 'three']build() {Row() {Column() {ForEach(this.arr, (item: string, index: number) => {Row() {Text(item)}})}.width('100%')}.height('100%')}
}

2.key

在ForEach循环渲染过程中，系统会为每个数组元素生成一个唯一且持久的键值，用于标识对应的组件。当这个键值变化时，ArkUI框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。

ForEach提供了一个名为keyGenerator的参数，这是一个函数，开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数，则ArkUI框架会使用默认的键值生成函数，即

@Entry
@Component
struct LearnList {@State arr: string[] = ['one',// temp'two','three']build() {Row() {Column() {Button('在one后追加一个数据temp').onClick(() => {this.arr.splice(1, 0, 'temp')})ForEach(this.arr,(item: string, index: number) => {Row() {Text(item)}},(item: string, index: number) => { // keyreturn item})}.width('100%')}.height('100%')}
}

• 情况2

@Entry
@Component
struct LearnList {@State arr: string[] = ['one',// three'two','three']build() {Row() {Column() {Button('在one后追加一个数据three').onClick(() => {this.arr.splice(1, 0, 'three')})ForEach(this.arr,(item: string, index: number) => {Row() {Text(item)}},(item: string, index: number) => { // key// return item // one three tworeturn item + index.toString() // one three two three})}.width('100%')}.height('100%')}
}

4.练习

1.鸿蒙计算器

1列5行
Column  w100% h100% bg#000 padding30结果展示 Row  w100%  h40%Text 233  w100%  textAigin居中  fontSize 80  color #fff第一行 Row  w100% h15% Text 数字  w75 h75 bg#333  font-size30 color #fff   圆角75   textAigin居中Text 数字  w75 h75 bg#333  font-size30 color #fff   圆角75   textAigin居中Text 数字  w75 h75 bg#333  font-size30 color #fff   圆角75   textAigin居中...第四行 Row  w100% h15% Text 数字  w75 h75 bg#333  font-size30 color #fff   圆角75   textAigin居中Text 数字  w75 h75 bg#333  font-size30 color #fff   圆角75   textAigin居中Text 数字  w75 h75 bg#333  font-size30 color #fff   圆角75   textAigin居中模型 total = 0   视图渲染      

 

1、完成了 每个数字点击保存到 num1

2、完成了 每个符号点击保存

3、完成的AC清空

4、缺 每个数字点击 判断 符号选没选 没选-保存到num1中 选了-保存到num2

5、 计算结果

@Entry
@Componentstruct Index {// 定义变量/状态/模型
@State num1:string = ''  // 为啥不用number 而是string  因为后期我希望数据是拼接而不是求和 最终两个数字相加才是求和
@State operator: string = ''
@State num2:string = ''
@State result:string = ''onChangeData = (data: string) => {// this.num1 += data// console.log(data)if (data == '=') {this.result = String(Number(this.num1) + Number(this.num2))return}// console.log('111'+ Number(data))if (data=='+'||data=='-'||data=='x'||data=='÷') {this.operator = datareturn}// this.num1 = dataif (this.operator) {this.num2 += data} else {this.num1 += data}
}build() {Column() {// 第一行 结果Column() {// 2  数字1// +  运算符// 2  数字2// 33  结果// css语法：color: red;  文本颜色红色// css语法： text-align: left/center/right 文本对齐方式左中右// .textAlign('center')// Text('11')Text(this.num1).width('100%').fontColor('#fff').fontSize(40).textAlign(TextAlign.End)Text(this.operator).width('100%').fontColor('#fff').fontSize(40).textAlign(TextAlign.End)Text(this.num2).width('100%').fontColor('#fff').fontSize(40).textAlign(TextAlign.End)// Text('33')Text(this.result).width('100%').fontColor('#fff').fontSize(60).textAlign(TextAlign.End)}.width('100%').height('40%')// 第二行Row() {Text('7').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('7') )Text('8').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('8'))Text('9').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('9'))Text('+').width(75).height(75).backgroundColor('#e4a751').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('+'))}.width('100%').height('15%')// 第三行： 代码冗余 也就是重复代码多了 后面会讲优化Row() {Text('4').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('4') )Text('5').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('5') )Text('6').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('6') )Text('-').width(75).height(75).backgroundColor('#e4a751').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('-') )}.width('100%').height('15%')// 第四行：Row() {Text('1').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('1') )Text('2').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('2') )Text('3').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('3') )Text('x').width(75).height(75).backgroundColor('#e4a751').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('x') )}.width('100%').height('15%')// 第五行Row() {Text('0').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('0') )Text('AC').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('AC') )Text('=').width(75).height(75).backgroundColor('#333').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('=') )Text('÷').width(75).height(75).backgroundColor('#e4a751').fontSize(30).fontColor('#fff').borderRadius(75).textAlign(TextAlign.Center).onClick(() => this.onChangeData('÷') )}.width('100%').height('15%')}.width('100%').height('100%').backgroundColor('#000').padding(30)
}}