鸿蒙开发-状态+判断+循环
鸿蒙开发-状态+判断+循环
·
🌈个人主页：前端青山
🔥系列专栏：鸿蒙开发篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来鸿蒙开发篇专栏内容:鸿蒙开发-状态+判断+循环
目录
1.状态
1原始类型
@Entry
@Component
struct Index {
@State num: number = 1
build() {
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: string
title: string
price: number
constructor(id: string, title: string, price: number){
this.id = id
this.title = title
this.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 = true
build() {
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) => { // key
return 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 two
return 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
@Component
struct 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 = data
return
}
// this.num1 = data
if (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)
}
}
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
16
0- 0
已为社区贡献3条内容
所有评论(0)