【鸿蒙开发实战】HarmonyOS容器组件（比如List）动态高度简单实现

前言

据悉，华为开发者大会今日盛大开幕，备受瞩目的纯正鸿蒙操作系统（HarmonyOS NEXT）即将揭晓更多细节。

新系统完全基于自主研发的系统架构，不再依赖AOSP代码，这使得其运行流畅性得到显著提升。同时，在仅支持鸿蒙内核和系统应用的情况下，系统减少了大约40%的冗余代码，这不仅提高了流畅性，也增强了系统安全性。

先前的报道已经指出，在Mate 70系列手机上测试的HarmonyOS NEXT能够将内存的利用效率提升至原来的三倍，显示出在相同硬件平台上，鸿蒙系统的运行效率远超安卓系统。

华为轮值董事长徐直军在4月的分析师大会上明确表示，构建鸿蒙系统的原生应用生态是华为2024年的核心战略任务。华为计划在一年内将中国市场中超过5000个常用智能手机应用迁移到鸿蒙原生操作系统，实现操作系统与应用生态的深度整合。

徐直军对鸿蒙系统的未来发展充满信心，他认为一旦完成从安卓到鸿蒙的迁移，鸿蒙系统将日臻成熟，并有潜力成为继苹果iOS和谷歌Android之后全球第三大主流移动操作系统。

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

需求描述

我们App在Android上有一个UI是弹框中展示List列表，由于List的每个Item的高度不固定同时为了整体美观。UI做出如下要求：

●List的item小于等于2的时候高度自适应
●List的item大于2的时候，高度限制为前2个Item之和。

实现细节

1.定义list的高度为listHeight: number | string = ‘auto’，保证初始化时正常加载
2.为List以及ListItem定义id标签，在build()方法中对应组件直接.id()就行
3.在aboutToAppear()方法中通过inspector.createComponentObserver监听layout事件，在收到第二个item的layout完成事件之后通过componentUtils.getRectangleById方法获得2个item的高度，动态为listHeight赋值。

代码参考

const id_List = 'MultiDialogList';
const id_List_Item = 'MultiDialogListItem';

@Entry(...)
@Component
export struct MultiDialogStruct {
  @LocalStorageProp(storageKey) permissions: Array<PermissionData> = new Array();
  @State listHeight: number | string = 'auto';

  build() {
    ...
    List() {
      ForEach(this.permissions, (item: PermissionData, index) => {
        ListItem() {
          ...
        }
        .id(id_List_Item + index)
      });
        
    }
    .id(id_List)
    .height(this.listHeight)
    ...
  }

  listener: inspector.ComponentObserver = inspector.createComponentObserver(id_List);
  listenerItem: inspector.ComponentObserver = inspector.createComponentObserver(id_List_Item + '1');

  aboutToAppear() {
    if (this.permissions.length > 2) {
      let itemLayoutComplete: boolean = false;
      //list初始化时会回调一次第一个item为0以及List的layout完成。因此需要监听下标为1也就是第二个item的layout完成
      //保证正确处理高度
      this.listener.on('layout', () => {
        if (itemLayoutComplete) {
          let itemOne: componentUtils.ComponentInfo = componentUtils.getRectangleById(id_List_Item + '0');
          let itemTwo: componentUtils.ComponentInfo = componentUtils.getRectangleById(id_List_Item + '1');
          if (this.listHeight == 'auto') {
            this.listHeight = px2vp(itemOne.size.height + itemTwo.size.height);
          }
        }
      });

      this.listenerItem.on('layout', () => {
        itemLayoutComplete = true;
      });
    }
  }

  aboutToDisappear(): void {
    this.listener.off('layout');
    this.listenerItem.off('layout');
  }
}

有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。

获取这份完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了

最新鸿蒙全栈开发学习线路

鸿蒙HarmonyOS开发教学视频

大厂面试真题

鸿蒙OpenHarmony源码剖析

这份资料能帮住各位小伙伴理清自己的学习思路，更加快捷有效的掌握鸿蒙开发的各种知识。有需要的小伙伴自行领取，，先到先得~无套路领取！！

获取这份完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）