互联网风格网站,深圳微信公众平台,wordpress仿小程序,公司注册网上申请网站#x1f308;个人主页#xff1a;前端青山 #x1f525;系列专栏#xff1a;鸿蒙开发篇 #x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来鸿蒙开发篇专栏内容:鸿蒙开发-状态判断循环 目录
1.状态1原始类型
2.引用类型
2.判断
3.循环
1.基本使用… 个人主页前端青山 系列专栏鸿蒙开发篇 人终将被年少不可得之物困其一生 依旧青山,本期给大家带来鸿蒙开发篇专栏内容:鸿蒙开发-状态判断循环 目录
1.状态1原始类型
2.引用类型
2.判断
3.循环
1.基本使用
2.key
4.练习
1.鸿蒙计算器
1.状态 1原始类型
EntryComponentstruct 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 WorldState 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,// temptwo,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,// threetwo,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-||datax||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)
}}
