【HarmonyOS】鸿蒙开发之渲染控制——第2.3章_鸿蒙开发条件渲染

---

if/eles条件渲染

if的使用方法与javascript，java中使用的if/eles条件渲染使用基本一致。

案例:

@Entry
@Component
struct IfElseDemo{
  @State isShow:boolean = false;
  build(){
    Column() {
      TitleBar({
        titleBarAttribute: {
          title: "ifElse使用案例",
          backShow: true,
          backCallback: () => {
            router.back()
          }
        },
      }) {}
      Column(){
        if(this.isShow){
         Text("迪加奥特曼")
        }else{
          Text("泰罗奥特曼")
        }
        Divider().margin({bottom:10,top:10})
        Button("修改标题").onClick(()=>{
          this.isShow = !this.isShow;
        })
      }.alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .height("100%")
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

注意事项:必须在组件内或者组件内的函数内使用
以下就是错误写法

ForEach渲染

ForEach的使用方法与javascript中的for循环的使用基本一致。

案例:

@Entry
@Component
struct ForeachDemo{
  private items: any[] = [
    {
      "imageName":"图片名称",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称2",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称3",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称4",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称5",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称6",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称7",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称8",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称9",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称10",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称11",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称12",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称13",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
      "imageName":"图片名称14",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },
  ];
  build(){
    Column() {
      TitleBar({
        titleBarAttribute: {
          title: "foreach使用案例",
          backShow: true,
          backCallback: () => {
            router.back()
          }
        },
      }) {}
      Column(){
        List() {
          ForEach(this.items, (item, index) => {
            ListItem() {
              Row() {
                Image(item.imageUrl)
                  .height(80)
                  .width(80)
                Column() {
                  Text(item.imageName) // 图片名称
                    .fontSize(20)
                  Text("索引值:"+index) // 图片名称
                    .fontSize(20)
                }
                .margin({ left: 5 })
                .alignItems(HorizontalAlign.Start)
                .layoutWeight(1)
              }
              .width('100%')
              .margin({bottom:10})
            }
          })
        }
        .width('100%')
      }.alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .height("100%")
      .padding({bottom:60})
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

LazyForEach循环渲染

LazyForEach 组件(数据懒加载)从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件

案例:

// 图片类
class ImgClass {
  public imageName: string;
  public imageUrl: string;
  constructor(imageName: string, imageUrl: string) {
    this.imageName = imageName;
    this.imageUrl = imageUrl;
  }
}

// 定义DataSource
abstract class BaseDataSource<T> implements IDataSource {

  private mDataSource: T[] = new Array();

  constructor(dataList: T[]) {
    this.mDataSource = dataList;
  }

  totalCount(): number {
    return this.mDataSource == null ? 0 : this.mDataSource.length
  }

  getData(index: number): T|null {
    return index >= 0 && index < this.totalCount() ? this.mDataSource[index] : null;
  }

  registerDataChangeListener(listener: DataChangeListener) {
  }

  unregisterDataChangeListener(listener: DataChangeListener) {
  }

}

//
class ImgDataSource extends BaseDataSource<ImgClass> {
  constructor(imgs: ImgClass[]) {
    super(imgs)
  }
}

@Entry
@Component
struct LazyForeachDemo{
  private items: any[] = [
    {
      "imageName":"图片名称",
      "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
    },{
    "imageName":"图片名称2",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称3",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称4",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称5",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称6",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称7",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称8",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称9",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称10",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称11",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称12",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称13",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },{
    "imageName":"图片名称14",
    "imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"
  },
  ];
  // 创建dataSource
  private dataSource: ImgDataSource = new ImgDataSource(this.items);
  build(){
    Column() {
      TitleBar({
        titleBarAttribute: {
          title: "lazyForeach使用案例",
          backShow: true,
          backCallback: () => {
            router.back()
          }
        },
      }) {}
      Column(){
        List() {
          LazyForEach(this.dataSource, (item, index) => {
            ListItem() {
              Row() {
                Image(item.imageUrl)
                  .height(80)
                  .width(80)
                Column() {
                  Text(this.handleImageName(item.imageName,index)) // 图片名称
                    .fontSize(20)
                  Text("索引值:"+index) // 图片名称
                    .fontSize(20)
                }
                .margin({ left: 5 })
                .alignItems(HorizontalAlign.Start)
                .layoutWeight(1)
              }
              .width('100%')
              .margin({bottom:10})
            }
          })
        }
        .width('100%')
      }.alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .height("100%")
      .padding({bottom:60})
    }
  }

  handleImageName(name:string,index:number):string{
    console.log("当前索引: " + index); // 打印item下标日志
    return "图片名称"+name
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

滚动到哪里，索引就显示哪个索引值。

✨$踩坑不易，还希望各位大佬支持一下$

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/700914