开天辟地 HarmonyOS(鸿蒙) - 组件（列表类）: List（Repeat 的应用）

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 HarmonyOS(鸿蒙) - 组件（列表类）: List（Repeat 的应用）

示例如下:

pages\component\list\ListDemo7.ets

/** List - Repeat 的应用** Repeat 支持组件的复用*/import { MyLog, TitleBar } from '../../TitleBar';@Entry
@Component
struct ListDemo7 {build() {Column() {TitleBar()Tabs() {TabContent() { MySample1() }.tabBar('基础').align(Alignment.Top)TabContent() { MySample2() }.tabBar('进阶').align(Alignment.Top)}.scrollable(true).barMode(BarMode.Scrollable).layoutWeight(1)}}
}@ComponentV2
struct MyItem1 {@Param type: string = "";@Param item: string = "";aboutToAppear() {MyLog.d(`${this.type} aboutToAppear:${this.item}`)}aboutToDisappear(): void {MyLog.d(`${this.type} aboutToDisappear:${this.item}`)}build() {Text(this.item).width('100%').fontSize(24).textAlign(TextAlign.Center).backgroundColor(Color.Orange).borderRadius(20).height(50).onAppear(() => {// item 挂载到组件树上时MyLog.d(`${this.type} onAppear:${this.item}`)}).onDisAppear(() => {// item 从组件树上卸载时MyLog.d(`${this.type} onDisAppear:${this.item}`)})}
}
@ComponentV2
struct MySample1 {@Local array: string[] = ['0', '1', '2']build() {Column({space:10}) {Button('click me').onClick(() => {this.array[2] = '999';})/** Repeat - 支持组件的复用*   each() - 遍历数据*     obj - 封装好的遍历出来的数据（一个 RepeatItem 对象）*       item - 数据*       index - 索引位置*   key() -  用于生成 item 的键值，其作用请参见 ListDemo5.ets 中的说明** 点击上面的按钮更新数组中位置 2 的数据，然后从下面的 Repeat 和 ForEach 的对比示例中，可以发现*   Repeat 中的位置 2 的 item 会被复用*   ForEach 中的位置 2 的 item 不会被复用（这个 item 会走一遍 onDisAppear, aboutToDisappear, aboutToAppear, onAppear）*/Repeat<string>(this.array).each((obj: RepeatItem<string>) => {// obj.item - 当前遍历出的数据// obj.index - 当前遍历出的数据的索引位置MyItem1({type: 'Repeat',item:`${obj.item}`})}).key((item: string) => item)ForEach(this.array, (item: string, index: number) => {MyItem1({type: 'ForEach',item:`${item}`})}, (item: string) => item)}}
}@ComponentV2
struct MyItem2 {@Param item: string = "";aboutToAppear() {MyLog.d(`aboutToAppear:${this.item}`)}aboutToDisappear(): void {MyLog.d(`aboutToDisappear:${this.item}`)}build() {Text(this.item).width('100%').fontColor(Color.White).fontSize(48).textAlign(TextAlign.Center).borderRadius(20).height(200).onAppear(() => {// item 挂载到组件树上时MyLog.d(`onAppear:${this.item}`)}).onDisAppear(() => {// item 从组件树上卸载时MyLog.d(`onDisAppear:${this.item}`)})}
}@ComponentV2
struct MySample2 {@Local array: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19']build() {Column() {List({space:10}) {/** Repeat - 支持组件的复用*   each() - 遍历数据*     obj - 封装好的遍历出来的数据（一个 RepeatItem 对象）*       item - 数据*       index - 索引位置*   key() -  用于生成 item 的键值，其作用请参见 ListDemo5.ets 中的说明*   virtualScroll() - 滚动场景时的规则（仅在 List, Grid, Swiper, WaterFlow 中有效）*     totalCount - 数据源总长度*       当 totalCount 与数据源总长度一致时，一切正常，这是默认值*       当 totalCount 小于数据源总长度时，则最多只能滚动到 totalCount 的位置，如果后续需要加载更多就自己再写相关代码*       当 totalCount 大于数据源总长度时，则最多能滚动到的位置会依据数据源总长度，但是滚动条的位置会依据 totalCount*   templateId() - 为不同的 item 指定不同的模板 id*   template() - 为指定的模板 id 构造指定的组件*     cachedCount - 当前模板在 Repeat 的缓存池中可缓存的节点的最大数（仅在 List, Grid, Swiper, WaterFlow 中有效）*       其与 List 之类的 cachedCount() 的区别是：*       1、List 之类的 cachedCount() 指的是除了挂载可视区的 item 外，上部和下部分别需要挂载的 item 的数量，所有被挂载 item 都会被 Repeat 视为"可见"节点*       3、template() 的 cachedCount 指的是被 Repeat 视为"不可见"节点的最大的缓存数量*/Repeat<string>(this.array).each((obj: RepeatItem<string>) => {// obj.item - 当前遍历出的数据// obj.index - 当前遍历出的数据的索引位置// 默认的 item 模板MyItem2({item:`${obj.item}`}).backgroundColor(Color.Red)}).key((item: string, index: number) => {return item;}).virtualScroll({ totalCount: this.array.length })// 为不同的 item 指定不同的模板 id.templateId((item: string, index: number) => {if (index > 9) {return 'template0'} else {return (index % 2 == 0) ? 'template1' : 'template2';}})// 为指定的模板 id 构造指定的组件.template('template1', (obj: RepeatItem<string>) => {MyItem2({item:`template1 ${obj.item}`}).backgroundColor(Color.Green)}, { cachedCount: 5 }).template('template2', (obj: RepeatItem<string>) => {MyItem2({item:`template2 ${obj.item}`}).backgroundColor(Color.Blue)}, { cachedCount: 5 })}.cachedCount(5)}}
}

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd