HarmonyOS开发：长列表界面实现详解（使用懒加载）

于 2024-08-17 02:08:38 发布
阅读量252 收藏 6
点赞数 9
文章标签： harmonyos 华为
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/CC1991_/article/details/141273110
版权

目录

  • 前言
  • 长列表界面开发挑战
  • 关于懒加载
  • HarmonyOS中的LazyForEach
  • 组件的创建
  • 关于长列表拖拽排序
  • 番外篇：NodeAdapter使用
  • 结束语

前言

随着大数据的快速发展，在移动应用开发中，多数据的长列表是非常常见的情况，需要允许用户浏览大量的数据项，比如商品列表、新闻资讯等。但是长列表的加载和渲染往往对性能要求较高，处理不当可能导致内存溢出或界面卡顿，这里就不得不提懒加载操作，因为它是一种非常有效的解决方案，可以按需加载数据，从而提高应用性能和用户体验。那么本文就来详细介绍在HarmonyOS开发中如何实现长列表界面的开发需求，并运用懒加载技术来处理，分享给大家，希望能够帮到更多的开发者。

长列表界面开发挑战

先来分享一下现在移动开发中遇到的新的挑战，那就是大数据量的列表数据在移动端的展示以及性能，也就是长列表界面在数据量大时可能会遇到的挑战，具体如下所示：

  • 内存消耗：一次性加载所有数据项可能导致内存消耗过大。
  • 加载时间：加载大量数据项需要较长时间，影响用户体验。
  • 滑动流畅度：大量数据项的渲染可能造成界面滑动卡顿。

上述这三点，是我们移动端开发中，必会遇到的问题，这也是我们在实际开发中必须要解决的问题。

关于懒加载

根据上面的挑战，为了解决长列表页面的展示和性能问题，引出来了懒加载技术，其实懒加载是一种按需加载资源的技术，它根据用户的滚动位置动态加载数据项，从而减少初始加载的数据量和渲染压力。这也正是在移动端开发中解决长列表数据展示的最佳解决方案，也是开发者首选的解决方法。

HarmonyOS中的LazyForEach

在HarmonyOS开发中也有懒加载技术，即LazyForEach，其实LazyForEach是从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。

根据鸿蒙官方的显示，LazyForEach在实际应用中也有一定的使用限制，具体有以下几个方面：

  • LazyForEach必须在容器组件内使用，在鸿蒙开发中只有List、Grid、Swiper以及WaterFlow组件支持数据懒加载（可配置cachedCount属性，即只加载可视部分以及其前后少量数据用于缓冲），而其他组件仍然是一次性加载所有的数据。
  • LazyForEach在每次迭代中，必须创建且只允许创建一个子组件。
  • 生成的子组件必须是允许包含在LazyForEach父容器组件中的子组件，不然就不能正常使用。
  • 允许LazyForEach包含在if/else条件渲染语句中，也允许LazyForEach中出现if/else条件渲染语句。
  • 键值生成器必须针对每个数据生成唯一的值，如果键值相同，会导致键值相同的UI组件渲染出现问题。
  • LazyForEach必须使用DataChangeListener对象来进行更新，第一个参数dataSource使用状态变量时，状态变量改变不会触发LazyForEach的UI刷新。
  • 为了高性能渲染，通过DataChangeListener对象的onDataChange方法来更新UI时，需要生成不同于原来的键值来触发组件刷新。

组件的创建

再来分享一下组件创建相关的内容，实际开发中在确定键值生成规则后，LazyForEach的第二个参数itemGenerator函数会根据键值生成规则为数据源的每个数组项创建组件，其中LazyForEach组件的创建包括两种情况：首次渲染、非首次渲染。

1、首次渲染

首次渲染会生成不同键值，因为在LazyForEach首次渲染时，会根据上述键值生成规则为数据源的每个数组项生成唯一键值，并创建相应的组件。这里分享一个简单的示例，具体代码如下所示：

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): string {
    return this.originDataArray[index];
  }

  // LazyForEach组件向其数据源处添加listener监听
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  // 对应的LazyForEach组件在数据源处去除listener监听
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const poss = this.listeners.indexOf(listener);
    if (poss >= 0) {
      this.listeners.splice(poss, 1);
    }
  }

  // 通知LazyForEach组件需要重载所有子组件
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  // 通知LazyForEach组件需要在index对应索引处添加子组件
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  // 通知LazyForEach组件需要在index对应索引处删除该子组件
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  // 通知LazyForEach组件将from索引和to索引处的子组件进行交换
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: string[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): string {
    return this.dataArray[index];
  }

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

  public pushData(data: string): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
}

@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource();
   
  aboutToAppear() {
    for (let i = 0; i <= 20; i++) {
      this.data.pushData(`sanzhanggui ${i}`)
    }
  }

  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Text(item).fontSize(50)
              .onAppear(() => {
                console.info("sanzhanggui:" + item)
              })
          }.margin({ left: 10, right: 10 })
        }
      }, (item: string) => item)
    }.cachedCount(5)
  }
}

通过上面的代码可以看到，键值生成规则是keyGenerator函数的返回值item。在LazyForEach循环渲染时，其为数据源数组项依次生成键值sanzhanggui 0、sanzhanggui 1 ... sanzhanggui 20，并创建对应的ListItem子组件渲染到界面上。

还有一种情况就是键值相同时错误渲染，当不同数据项生成的键值相同时，会出现不可控的效果，比如在LazyForEach渲染的数据项键值均相同，在滑动过程中，LazyForEach会对划入划出当前页面的子组件进行预加载，而新建的子组件和销毁的原子组件具有相同的键值，框架可能存在取用缓存错误的情况，导致子组件渲染有问题。

2、非首次渲染

关于非首次渲染，当LazyForEach数据源发生变化，需要再次渲染时，开发者应根据数据源的变化情况调用listener对应的接口，通知LazyForEach做相应的更新，分为各使用场景：添加数据、删除数据、交换数据、改变单个数据、改变多个数据、精准批量修改数据、改变数据子属性，由于篇幅原因，这里只以添加数据为例来分享，具体如下所示：

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): string {
    return this.originDataArray[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (poss >= 0) {
      this.listeners.splice(poss, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
      // 另外一种写法：listener.onDatasetChange([{type: DataOperationType.ADD, index: index}]);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: string[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): string {
    return this.dataArray[index];
  }

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

  public pushData(data: string): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
}

@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource();

  aboutToAppear() {
    for (let i = 0; i <= 20; i++) {
      this.data.pushData(`Hello ${i}`)
    }
  }

  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Text(item).fontSize(50)
              .onAppear(() => {
                console.info("sanzhanggui:" + item)
              })
          }.margin({ left: 10, right: 10 })
        }
        .onClick(() => {
          // 追加子组件
          this.data.pushData(`sanzhanggui ${this.data.totalCount()}`);
        })
      }, (item: string) => item)
    }.cachedCount(5)
  }
}

根据上面的代码可以看到，当我们点击LazyForEach的子组件时，首先调用数据源data的pushData方法，该方法会在数据源末尾添加数据并调用notifyDataAdd方法。但是在notifyDataAdd方法内会又调用listener.onDataAdd方法，该方法会通知LazyForEach在该处有数据添加，LazyForEach便会在该索引处新建子组件。

关于长列表拖拽排序

通过上面介绍的关于长列表界面的实际情况使用，这里再分享一个在实际开发中比较常见的需求，那就是根据用户拖拉拽的方式来对长列表数据进行排序。这里用到的技术就是，当LazyForEach在List组件下使用，并且设置了onMove事件，可以使能拖拽排序。拖拽排序离手后，如果数据位置发生变化，则会触发onMove事件，上报数据移动原始索引号和目标索引号。但是在onMove事件中，需要根据上报的起始索引号和目标索引号修改数据源，而且onMove中修改数据源不需要调用DataChangeListener中接口通知数据源变化。下面以一个简单示例来分享：

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): string {
    return this.originDataArray[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (poss >= 0) {
      this.listeners.splice(poss, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: string[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): string {
    return this.dataArray[index];
  }

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

  public moveDataWithoutNotify(from: number, to: number): void {
    let tmp = this.dataArray.splice(from, 1);
    this.dataArray.splice(to, 0, tmp[0])
  }

  public pushData(data: string): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  public deleteData(index: number): void {
    this.dataArray.splice(index, 1);
    this.notifyDataDelete(index);
  }
}

@Entry
@Component
struct Parent {
  private data: MyDataSource = new MyDataSource();

  build() {
    Row() {
      List() {
        LazyForEach(this.data, (item: string) => {
            ListItem() {
              Text(item.toString())
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .size({height: 120, width: "90%"})
            }.margin(10)
            .borderRadius(10)
            .backgroundColor("#FFFF0000")
          }, (item: string) => item)
          .onMove((from:number, to:number)=>{
            this.data.moveDataWithoutNotify(from, to)
          })
      }
      .width('100%')
      .height('100%')
      .backgroundColor("#4444")
    }
  }
  aboutToAppear(): void {
    for (let i = 0; i < 100; i++) {
      this.data.pushData(i.toString())
    }
  }
}

番外篇：NodeAdapter使用

上面分享的关于LazyForEach的使用，那么鸿蒙官方又针对List、Grid、WaterFlow、Swiper组件，提供NodeAdapter对象替代ArkTS的LazyForEach功能，用于按需生成子组件，其中List组件的属性枚举值为NODE_LIST_NODE_ADAPTER，Grid组件的属性枚举值为NODE_GRID_NODE_ADAPTER，WaterFlow组件的属性枚举值为NODE_WATER_FLOW_NODE_ADAPTER，Swiper组件的属性枚举值为NODE_SWIPER_NODE_ADAPTER。

上面介绍的这两种方式虽然都用于按需生成组件，但不同于ArkTS的LazyForEach，NodeAdapter对象的规格如下：

  • 设置了NodeAdapter属性的节点，不再支持addChild等直接添加子组件的接口。而子组件完全由NodeAdapter管理，使用属性方法设置NodeAdapter时，会判断父组件是否已经存在子节点，如果父组件已经存在子节点，则设置NodeAdapter操作失败，返回错误码。
  • NodeApdater通过相关事件通知开发者按需生成组件，类似组件事件机制，开发者使用NodeAdapter时要注册事件监听器，在监听器事件中处理逻辑，相关事件通过ArkUI_NodeAdapterEventType定义。还有就是NodeAdapter不会主动释放不在屏幕内显示的组件对象，开发者需要在NODE_ADAPTER_EVENT_ON_REMOVE_NODE_FROM_ADAPTER事件中进行组件对象的释放，或者进行缓存复用。

根据鸿蒙官方的介绍，这里分享一下典型列表滑动场景下的事件触发机制，具体如下图所示：

这里关于NodeAdapter的使用只做简单理论分享，具体的使用，待随后做一个专题来分享。

结束语

通过本文的分享，大家对鸿蒙开发中长列表的使用肯定会有更深入的了解，长列表界面是应用中展示大量数据的重要方式，而懒加载技术则是提高长列表性能的关键。在HarmonyOS开发中，通过合理设计适配器、实现懒加载逻辑、异步数据加载和视图复用，可以有效提升长列表的加载速度和滑动流畅度，为用户提供更好的使用体验。我们作为开发者，在实现长列表时应充分考虑性能优化和用户体验，利用HarmonyOS提供的强大API和组件，构建高效、流畅的长列表界面。随着HarmonyOS生态的不断发展壮大，期待更多的创新技术和最佳实践的出现，让我们一起拭目以待吧！

三掌柜666
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HarmonyOS 应用开发配置—Stage模型以及应用/组件级配置详解
一键难忘的博客
11-30 1793
HarmonyOS 应用开发配置—Stage模型以及应用/组件级配置详解【鸿蒙专栏-18】 HarmonyOS 应用模型是为开发者提供应用程序所需能力的抽象，简化了应用开发流程，提供了一套统一的模型，使得应用开发更为简单、高效。在此，我们将详细解读应用模型的构成要素以及对新推出的 Stage 模型进行深入分析。
HarmonyOS应用开发实战—开箱即用的登录页面3【ArkTS】
一键难忘的博客
12-27 2490
HarmonyOS（鸿蒙操作系统）是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统，旨在实现在各种设备之间的无缝协同和共享，包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS的目标是构建一个统一的、开放的、全场景的操作系统生态系统。 这是我做项目中用到的应该展示页面。 ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能
HarmonyOS鸿蒙应用开发( 四、重磅组件List列表组件使用详解)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-23 5970
List列表组件，是一个非常常用且重要的组件。可以说在一个应用中，它的身影无处不在。它包含一系列相同宽度的列表项，适合连续、多行呈现同类数据，例如图片列表和和文本列表等。ArkUI 框架采用 List 容器创建列表（类似 Android 的 RecycleView、Compose 的 LazyColumn）。
HarmonyOS开发系列：Web组件文件上传示例规范
m0_70749039的博客
07-05 1040
web组件提供了onShowFileSelector事件，在处理具有“文件”输入类型的HTML表单时，如果用户按下“选择文件”按钮，会触发该事件
HarmonyOS实战开发：module.json5配置文件（Stage模型）
2401_84194030的博客
04-18 1282
认识一下module.json5配置文件
HarmonyOS开发知识：抓取和展示 IO 延迟的数据详解
zxc195818的博客
08-01 794
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的。
HarmonyOS4.0应用开发--2.鸿蒙应用开发语言
weixin_42638946的博客
04-21 1080
HarmonyOS 应用的主要开发语言是 ArkTS，它由 TypeScript（简称TS）扩展而来，在继承TypeScript语法的基础上进行了一系列优化，使开发者能够以更简洁、更自然的方式开发应用。值得注意的是，TypeScript 本身也是由另一门语言 JavaScript 扩展而来。因此三者的关系如下图所示类（class）是面向对象编程语言中的一个重要概念。
HarmonyOS应用开发-UI组件性能优化实例详解
HarmonyOS_002的博客
07-05 1025
图2 自定义组件生命周期流程图如上图所示，自定义组件创建完成之后，在build函数执行之前，将先执行aboutToAppear()生命周期回调函数。此时若在该函数中执行耗时操作，将阻塞UI渲染，增加UI主线程负担。因此，应尽量避免在自定义组件的生命周期内执行高耗时操作。对于复杂计算的耗时场景，可以将计算结果进行缓存处理。对于不需要等待结果的高耗时任务，可以采用多线程处理该任务，通过并发的方式避免主线程阻塞。
HarmonyOS开发—Arkts循环渲染(ForEach)深入运用详解
一键难忘的博客
11-30 3334
HarmonyOS开发—Arkts循环渲染(ForEach)深入运用详解【鸿蒙专栏-16】 ForEach接口基于数组类型数据进行循环渲染，需要与容器组件配合使用。它能够根据数据源的变化，动态生成对应的子组件，并将其渲染到界面上。通过深入了解ForEach接口的使用方法和高级用法，我们可以更加灵活地处理不同场景下的数据渲染需求。在实际开发中，结合条件渲染逻辑和性能优化，能够提升用户体验并优化应用性能。希望本文对你理解和应用ArkTS中的ForEach接口提供了帮助。
鸿蒙Harmony开发：指纹认证功能—Fingerprint_auth驱动详解
qwe9518的博客
07-29 765
包括指纹认证执行器列表查询、执行器信息查询、指定指纹模板ID查询模板信息、用户认证框架和执行器间的指纹模板信息对账、指纹的录入、删除、认证和识别等。
HarmonyOS云开发基础认证自刷题库
09-13
【 HarmonyOS 云开发基础认证自刷题库详解】 在当今的互联网技术发展潮流中，华为推出的HarmonyOS操作系统以其跨平台、分布式的特点受到了广泛关注。为了帮助开发者更好地掌握HarmonyOS的云开发技能，官方提供了...
Swift 开发之懒加载的实例详解
08-29
在Swift编程中，懒加载是一种优化策略，它允许我们延迟初始化某个属性或变量，直到第一次真正使用它的时候。这样可以避免在应用程序启动时不必要的资源消耗，特别是当初始化过程复杂或耗时的情况下。本文将深入讲解...
HarmonyOS 开发平台和工具
02-11
HarmonyOS 开发平台是华为构建的一个综合性的操作系统开发环境，旨在为开发者提供高效、便捷的工具，以适应超级终端时代的应用开发需求。该平台聚焦于鸿蒙系统的特性，支持跨设备分布式协同，使得应用程序能够在不同...
HarmonyOS应用开发-marquee组件使用
04-18
在HarmonyOS的应用开发过程中，为了实现文本滚动的效果，我们可以使用`marquee`组件。此组件可以方便地帮助开发者实现动态展示文本的需求，适用于广告滚动、通知滚动等场景。 #### 创建项目 首先，我们需要在...
HarmonyOS应用开发-圆角list实现.docx
06-03
### HarmonyOS应用开发——圆角列表实现详解 #### 一、引言 随着HarmonyOS在智能设备领域的广泛应用，开发者对于界面美观度的要求也日益提高。本文将详细讲解如何在HarmonyOS应用中实现带有圆角效果的列表，并通过...
【鸿蒙学习】Stage模型与FA模型的对比与应用选择
一个不断前行的程序者
08-12 375
Stage模型是一种基于应用生命周期和功能模块划分的架构设计理念。它将应用分为多个阶段（Stage），每个阶段对应一个特定的任务或界面，使得应用结构更加清晰、开发更加高效。FA模型（Feature Ability Model）是鸿蒙OS中另一种应用架构设计理念，它以功能为单元，将应用划分为多个功能模块（Feature Ability），每个模块具有独立的生命周期和功能。Stage模型和FA模型各有优势，适用于不同的开发场景。普通开发者应根据项目需求、团队协作、性能要求等因素，选择最合适的模型。
【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面（一）
一个不断前行的程序者
08-14 812
ArkWeb是用于应用程序中显示Web页面内容的Web组件，为开发者提供页面加载、页面交互、页面调试等能力。可以实现移动端的混合式开发（Hybrid App）。
鸿蒙（API 12 Beta3版）【扩展屏投播开发指导】使用投播组件
鸿蒙的技术博客
08-14 1115
通过本节开发指导，可在系统镜像投屏后，获取投屏设备信息，实现扩展屏模式的投播，实现双屏协作的能力。
HarmonyOS应用开发学习-ArkUI-容器组件
最新发布
08-15 809
设置导航点样式:-left: 设置导航点距离Swiper组件左边的距离。-size:设置导航点的直径。例如,"1fr 1fr 2fr'是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。例如,"1fr 1fr 2fr”是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。网格容器，由“行”和“列”分割的单元格所组成，通过指定”项目”所在的单元格做出各种各样的布局。设置为false是为横向Tabs，设置为true时为纵向Tabs。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三掌柜666

如果对您有所帮助，请支持一下呗

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值