当前位置: 首页 > article >正文

【HarmonyOS】横向List高度适配

当list设置横向布局时,list高度默认撑满没有达到预期的高度自适应,可以通过onAreaChange动态修改高度。

【修改前】

@Entry
@Component
struct Page148 {
  build() {
    Column() {
      List() {
        ForEach(['北京', '杭州', '上海'], (item: string, index: number) => {
          ListItem() {
            Text(item).fontSize(24)
              .height(100 * (Math.floor(Math.random() * 3) + 1))//生成一个1到3 随机数,然后+100高度 测试
              .backgroundColor(Color.Pink)
              .margin(10)
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .backgroundColor('#FFF1F3F5')
    }.width('100%')
    .height('100%')
  }
}

【修改后】

@Entry
@Component
struct Page148 {
  @State maxItemHeight: number = -1

  build() {
    Column() {
      List() {
        ForEach(['北京', '杭州', '上海'], (item: string, index: number) => {
          ListItem() {
            Text(item).fontSize(24)
              .height(100 * (Math.floor(Math.random() * 3) + 1))//生成一个1到3 随机数,然后+100高度 测试
              .backgroundColor(Color.Pink)
              .margin(10)
          }.onAreaChange((oldArea: Area, newArea: Area) => {
            if (this.maxItemHeight < newArea.height) {
              this.maxItemHeight = newArea.height as number
            }
          })
        })
      }
      .listDirection(Axis.Horizontal)
      .backgroundColor('#FFF1F3F5')
      .height(this.maxItemHeight == -1 ? undefined : this.maxItemHeight)
    }.width('100%')
    .height('100%')
  }
}


http://www.kler.cn/a/322509.html

相关文章:

  • Java通过calcite实时读取kafka中的数据
  • 模式:每个服务一个数据库
  • 一文速学---红黑树
  • 基于多模板配准的心腔分割算法
  • 本草智控:中药实验管理的智能时代
  • 28.<Spring博客系统⑤(部署的整个过程(CentOS))>
  • 什么是数据库视图(View)?视图和表有何区别?
  • 从0到1,数字媒体产业基地见证每一个创意的诞生与成长
  • Oracle 数据库安装和配置指南
  • 西电雨课堂刷课工具
  • Matlab/simulink低版本打开高版本
  • 2024/9/27 The Limitations of Deep Learning in Adversarial Settings读后感
  • 如何查看服务器是否有raid阵列卡以及raid类型
  • CVE-2024-1112 Resource Hacker 缓冲区溢出分析
  • 防火墙详解(二)通过网页登录配置华为eNSP中USG6000V1防火墙
  • 基于springBoot校园健康驿站管理平台(源码+教程)
  • 如何将很多个pdf拼接在一起?很多种PDF拼接的方法
  • GloVe(全局词向量嵌入)
  • net core mvc 数据绑定 《1》
  • 串匹配问题的三种算法
  • 卫星导航定位原理学习(三)
  • C语言malloc()函数与calloc()函数的区别
  • Unity 设计模式 之 行为型模式-【命令模式】【责任链模式】
  • 个人网站介绍和部署(开源)
  • HTML和CSS做一个无脚本的手风琴页面(保姆级)
  • 打开ffmpeg编码器的时候报错:avcodec_open2()返回-22