鸿蒙学习笔记
第十节 if分支
这一节非常简单,简单来说就有点类似与JSP当中可以有加界面又加逻辑判断
在鸿蒙里面可以在build和@Builder中的方法中加入if判断
如
if(this.isSuccessful){
Button('student examine list ')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
this.isSuccessful = !this.isSuccessful
this.color = 'red'
})
}else {
Button('student not examine list ')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
this.isSuccessful = !this.isSuccessful
this.color = 'green'
})
}
如果状态是第一种我们就展示考试的学生并且颜色为绿色,
如果不是我们就展示没有考试的学生且颜色为红色
全代码
@Entry
@Component
struct BranchStudy {
@State message: string = 'Hello World'
@State isSuccessful : boolean = false
@Provide("com.qing.color1") color : string = 'red';
build() {
Row() {
Column() {
if(this.isSuccessful){
Button('student examine list ')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
this.isSuccessful = !this.isSuccessful
this.color = 'red'
})
}else {
Button('student not examine list ')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
this.isSuccessful = !this.isSuccessful
this.color = 'green'
})
}
Divider()
Branch_Common({name:'groge',age:18,img:$rawfile('t1.png')})
}
.width('100%')
}
.height('100%')
}
}
@Component
struct Branch_Common{
name: string
age : number
img : Resource
@Consume("com.qing.color1") color:string;
build(){
Row() {
Column() {
Text("student name:" + this.name)
.mytext1(30, this.color)
.margin({ left: 8, right: 8 })
Text("student age:" + this.age)
.mytext1(30, this.color)
.margin({ left: 8, right: 8 })
Image(this.img)
.objectFit(ImageFit.Auto)
.height('200')
.width('200')
}.width("100%")
}.height("100%")
}
}
@Extend(Text) function mytext1(size:number, co : string){
.fontSize(size)
.fontColor(co)
}