if/else:条件渲染
@Entry
@Component
struct ViewA {
@State count: number = 0;
build() {
Column() {
Text(`count=${this.count}`)
if (this.count > 1) {
Text(`count 大于 1`)
}else{
Text(`啥也不是`)
}
}
}
ForEach:循环渲染
//三大参数
ForEach(
//要遍历的数组
arr: Array,
//页面组件生成函数
itemGenerator: (item: any, index?: number) => {
},
//键 生成函数--为数组每一项生成唯一标识,组件是否重新渲染的标准
keyGenerator?: (item: any, index?: number): string => {
}
)
用法
@Entry
@Component
struct Parent {
@State simpleList: Array<string> = ['one', 'two', 'three'];
build() {
Row() {
Column() {
ForEach(this.simpleList, (item: string) => {
ChildItem({ item: item })
}, (item: string) => item)
}
.width('100%')
.height('100%')
}
.height('100%')
.backgroundColor(0xF1F3F5)
}
}
@Component
struct ChildItem {
@Prop item: string;
build() {
Text(this.item)
.fontSize(50)
}
}
ForEach 循环 项过多 超出屏幕的时候 使用 容器组件 List