首页 > 其他分享 >鸿蒙HarmonyOS开发：自适应布局的介绍，使用场景、实现方式与示例解析

鸿蒙HarmonyOS开发：自适应布局的介绍，使用场景、实现方式与示例解析

时间：2025-01-21 11:29:50浏览次数：3  
标签：鸿蒙 width 100% 示例 height 适应 HarmonyOS 宽度 组件

文章目录

一、布局简介

自适应布局是通过设定元素与外部容器的相对关系实现的。当外部容器大小、位置等发生变化时，元素即可以根据相对关系自动变化以适应外部环境的变化。通常自适应布局能根据vp/px变化进行无级连续的变化。

  • 自适应布局常常需要借助Row组件、Column组件或Flex组件实现。

在这里插入图片描述

  • 针对常见的开发场景，方舟开发框架提炼了七种自适应布局能力，这些布局可以独立使用，也可多种布局叠加使用。
自适应布局能力使用场景实现方式
拉伸能力容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。Flex布局的flexGrow和flexShrink属性
均分能力容器组件尺寸发生变化时，增加或减小的空间均匀分配给容器组件内所有空白区域。Row组件、Column组件或Flex组件的justifyContent属性设置为FlexAlign.SpaceEvenly
占比能力子组件的宽或高按照预设的比例，随容器组件发生变化。基于通用属性的两种实现方式：
将子组件的宽高设置为父组件宽高的百分比
layoutWeight属性
缩放能力子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。布局约束的aspectRatio属性
延伸能力容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变化显示或隐藏。基于容器组件的两种实现方式：
通过List组件实现
通过Scroll组件配合Row组件或Column组件实现
隐藏能力容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏。相同显示优先级的子组件同时显示或隐藏。布局约束的displayPriority属性
折行能力容器组件尺寸发生变化时，如果布局方向尺寸不足以显示完整内容，自动换行。Flex组件的wrap属性设置为FlexWrap.Wrap

二、自适应拉伸

某单个内容或某组内容的显示宽度不是固定值，而是通过相对参照物的方式来确定其显示宽度。当参照物的宽度发生变化时，内容或内容间距的宽度随之发生自适应拉伸。

自适应拉伸适用于文字、普通按钮、间距等展示宽度灵活，对宽高比不敏感的内容和内容组合。

当可能出现的拉伸宽度不足以显示默认内容时，应根据场景选择优先保证内容完整或者优先保证其他内容的屏效，并进行截断或换行等组合适配。

1、左右拉伸

例如，列表开关组合中，在窗口宽度变化时，开关控件固定宽度并相对列表的右边缘位置固定，整个组合与文本宽度均自适应变化。

在这里插入图片描述
示例代码

@Entry
@Component
struct AdaptiveLayoutPage {
  build() {
    Column() {
      Row() {
        Text('健康使用手机')
          .fontSize(16)
          .height(22)
          .fontWeight(FontWeight.Medium)
          .lineHeight(22)
        Blank() // 通过Blank组件实现拉伸能力
        Toggle({ type: ToggleType.Switch })
          .width(36)
          .height(20)
      }
      .height(55)
      .borderRadius(12)
      .padding({ left: 15, right: 15 })
      .backgroundColor('#FFFFFF')
      .width('100%')//此处宽度变化时，文字和开关的尺寸固定，仅有中间空白区域（Blank组件）随父容器尺寸变化而伸缩。
    }
    .height('100%')
    .width('100%')
    .padding(20)
    .backgroundColor(Color.Gray)
  }
}
2、均分拉伸

例如，在图标型网格中，当窗口宽度变化时，入口图标间距与图标离左右边缘间距同时均等变化。

在这里插入图片描述

示例代码

@Entry
@Component
struct AdaptiveLayoutPage {
  readonly list: number [] = [0, 1, 2, 3]

  build() {
    Column() {
      // 均匀分配父容器主轴方向的剩余空间
      Row() {
        ForEach(this.list, (item: number) => {
          Column() {
            Image($r("app.media.startIcon"))
              .width(48)
              .height(48)
              .margin({ top: 8 })
            Text('App name')
              .width(64)
              .height(30)
              .lineHeight(15)
              .fontSize(12)
              .textAlign(TextAlign.Center)
              .margin({ top: 8 })
              .padding({ bottom: 15 })
          }
          .width(80)
          .height(102)
          .flexShrink(1)
        })
      }
      .width('100%')//宽度变化时，图标及文字的尺寸不变，图标间的间距及图标离左右边缘的距离同时均等改变。
      .justifyContent(FlexAlign.SpaceEvenly)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.White)
  }
}

三、自适应缩放

组件的显示大小是固定比例，通过相对参照物的方式来确定其宽或高。当参照物的大小发生变化时，元素的大小随之发生自适应缩放。

自适应缩放适用于图片、圆形按钮、banner、反应真实物体形状的图像等必须保证宽高比的内容。

不推荐将所有元素同时缩放、或某内容放大过大超过屏幕50%。这将导致获取信息量不增反减，不符合用户预期。

1、完整缩放

例如，在宽度或高度变化时，时钟始终保证表盘完整展示并根据较短边决定宽高。

在这里插入图片描述
示例代码

@Entry
@Component
struct AdaptiveLayoutPage {
  build() {
    Column() {
      Column() {
        Column() {
          Image($r("app.media.1"))
            .width('100%')
            .height('100%')
        }
        .aspectRatio(1)// 固定宽高比
      }
      .backgroundColor(Color.Pink)
      .height(200)//这里宽或高改变是，图片也随之变化
      .width(400)//这里宽或高改变是，图片也随之变化
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.White)
  }
}
2、占比缩放

例如，带主体和背景的插画，画面内容根据宽度变化裁切，根据高度变化按50%比例缩放。

在这里插入图片描述
示例代码

@Entry
@Component
struct AdaptiveLayoutPage {
  build() {
    Column() {
      Row(){

      }
      .backgroundImage($r('app.media.banner'))
      .backgroundImageSize(ImageSize.Cover)
      .width('100%')
      .layoutWeight(1)

      Row(){

      }
      .backgroundColor(Color.White)
      .width('100%')
      .layoutWeight(1)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}

四、自适应延伸

组件的显示数量不是固定的，而是通过相对参照物的方式来确定其显示数量。当参照物的宽度发生变化时，组件随之发生自适应延伸显示更多数量。

自适应延伸/隐藏适用于页签、操作块、推荐栏目等具有相同交互层级且有更多数据可以填充的内容。

注意：需要判断因隐藏而不展示的内容对功能完整性是否有影响，并考虑通过滑动或“更多”按钮提供查看使用该内容的方式。

1、同功能内容延伸

例如，子页签和可滑动宫格在默认宽度下通过露出最后内容，提示右方有更多入口，在宽度变化时，可在每个元素宽度不变、保持滑动交互时显示更多数量。

在这里插入图片描述
示例代码

@Entry
@Component
struct AdaptiveLayoutPage {
  readonly appList: number [] = [0, 1, 2, 3, 4, 5, 6, 7]
  build() {
    Column() {
      Row({ space: 10 }) {
        // 通过List组件实现隐藏能力
        List({ space: 10 }) {
          ForEach(this.appList, (item:number) => {
            ListItem() {
              Column() {
                Image($r("app.media.startIcon"))
                  .width(48)
                  .height(48)
                  .margin({ top: 8 })
                Text('App name')
                  .width(64)
                  .height(30)
                  .lineHeight(15)
                  .fontSize(12)
                  .textAlign(TextAlign.Center)
                  .margin({ top: 8 })
                  .padding({ bottom: 15 })
              }.width(80).height(102)
            }.width(80).height(102)
          })
        }
        .padding({ top: 16, left: 10 })
        .listDirection(Axis.Horizontal)
        .width('100%')
        .height(118)
        .borderRadius(16)
        .backgroundColor(Color.White)
      }
      .width('100%')//这里宽度变化，页面中显示的图标数量随之发生改变。
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}
2、不同功能内容延伸或隐藏

例如，默认处于同一排的不同音乐播放按钮优先级不同，在宽度变化时可延伸或隐藏低优先级的按钮，最大化适应不同窗口尺寸。

在这里插入图片描述
示例代码

@Entry
@Component
struct AdaptiveLayoutPage {
  build() {
    Column() {
      Row({ space:24 }) {
        Image($r("sys.media.ohos_ic_public_sound_off"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .displayPriority(1)  // 布局优先级

        Image($r("sys.media.ohos_ic_public_play_last"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .displayPriority(2)  // 布局优先级

        Image($r("sys.media.ohos_ic_public_pause"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .displayPriority(3)  // 布局优先级

        Image($r("sys.media.ohos_ic_public_play_next"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .displayPriority(2)  // 布局优先级

        Image($r("sys.media.ohos_ic_public_more"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .displayPriority(1)  // 布局优先级
      }
      .width('100%')//父容器宽度发生变化时，其子元素按照预设的优先级显示或隐藏。
      .height(96)
      .borderRadius(16)
      .backgroundColor('#FFFFFF')
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
    }
    .height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor(Color.Gray)
  }
}

五、自适应折行

定义了折行能力的组件，可以根据组件容器的可用空间，体现纵向布局或者横向布局。

自适应折行适用于页签、操作块、内容流等具有相同交互层级，且希望保证类型和数量完整性的内容。

自适应布局对应OpenHarmony系统提供的自适应布局能力中的拉伸、均分、缩放、占比、延伸、隐藏、折行。

例如，在宽度足够时，操作块位于同一行，在宽度变小时，可根据内容能显示的宽度纵向排布。

在这里插入图片描述

示例代码

@Entry
@Component
struct AdaptiveLayoutPage {
  readonly searchList: string [] = ['摇滚', '九十年代金曲', '交响乐', '流行']

  build() {
    Column() {
      // 通过Flex组件warp参数实现自适应折行
      Flex({
        direction: FlexDirection.Row,
        alignItems: ItemAlign.Center,
        justifyContent: FlexAlign.Start,
        wrap: FlexWrap.Wrap
      }) {
        ForEach(this.searchList, (item: Resource) => {
          Text(item)
            .padding({
              top: 8,
              bottom: 8,
              left: 20,
              right: 20
            })
            .margin(8)
            .fontSize(16)
            .fontWeight(500)
            .borderRadius('50%')
            .backgroundColor('#e1e3e5')
        })
      }
      .backgroundColor('#FFFFFF')
      .padding(10)
      .width('100%')//当父容器宽度发生变化，其中的内容做自适应换行。
      .borderRadius(15)
    }
    .height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor(Color.Gray)
  }
}

点击下方按钮添加微信，领取相关资料、学习方案。一键三连+关注，你的支持是我创作的动力。在这里，我乐于倾囊相授。

标签：鸿蒙,width,100%,示例,height,适应,HarmonyOS,宽度,组件
From： https://blog.csdn.net/shanghai597/article/details/145009531

相关文章

  • xe-utils 函数库使用示例
    xe-utils是一个功能丰富的JavaScript工具库，提供了大量的实用函数来简化常见的编程任务。它特别适用于与vxe-table（一个基于Vue.js的表格组件库）结合使用，但也可以独立应用于任何JavaScript项目中。安装xe-utils你可以通过npm或yarn安装xe-utils：npminstallxe-utils......
  • js原型链理解示例
    a函数继承b函数，b函数继承c函数，那a函数的实例abc可以直接读取c函数的prototype属性吗？在JavaScript中，函数可以通过原型链继承其他函数的属性和方法。上面提到“a函数继承b函数，b函数继承c函数”，通常是指构造函数之间的继承关系，这涉及到原型链的层级结构。在这种情况下，a的实例可以......
  • 使用 Java 获取淘宝推荐商品列表 API 接口的示例代码解析
    在电商领域，推荐系统是提升用户体验和促进销售的重要工具。淘宝开放平台提供了taobao.item.recommend接口，允许开发者根据用户行为、搜索关键词或分类ID获取推荐商品列表。本文将详细介绍如何使用Java调用该接口，并解析返回的数据。一、淘宝推荐商品接口简介taobao.item.reco......
  • 鸿蒙开发入门感受以及目前存在的问题
    初学鸿蒙开发的一点感受博主之前的学习方向是前端开发，最近开始学习鸿蒙开发相关的内容，在学习过程中遇到了很多困难，也了解到了很多前端开发与客户端开发的不同之处。不同之处虽然目前大部分客户端应用的功能与web应用结合紧密。但是，客户端的本质特性决定了它需要更细致地去解决......
  • Vue2_了解核心概念和一个示例工程
    Vue2_了解核心概念和一个示例工程写文的目的是为了梳理知识，正如某一位面试官所说：会写并不牛，懂原理才牛下面开始：vue具有较好的可维护性和可测试性vue是一个渐进式框架(请忽略我这灵魂画手......
  • 配置基于VLAN的VLAN Mapping示例（2 to 1）
    此举例是2to1VLANMapping中的N:1场景，因为外层和内层VLANTag不同的业务报文，外层映射到了同一个VLAN。如图10-7所示，用户通过家庭网关、楼道交换机和小区交换机接入汇聚层网络，为了节省运营商网络VLAN资源，及实现不同用户相同业务在传输过程中相互隔离，可以在楼道交换机上部署Q......
  • 配置基于VLAN的VLAN Mapping示例（1:1）
    此举例是1to1中的1:1VLANMapping。不同的小区拥有相同的业务，如上网、IPTV、VoIP等业务，为了便于管理，各个小区的网络管理者将不同的业务划分到不同的VLAN中，相同的业务划分到同一个VLAN中。目前存在不同的小区中相同的业务所属的VLAN不相同，但需要实现不同VLAN间的用户相互通......
  • 使用 Python 开发一个 AI Agent 自媒体助手示例
    1.项目背景随着自媒体行业的快速发展，内容创作者需要处理大量重复性任务，例如撰写文章、生成标题、优化关键词、分析数据等。通过开发一个AIAgent自媒体助手，可以帮助创作者高效完成这些任务，节省时间并提升内容质量。本文将展示如何使用Python构建一个简单的AIAgent......
  • 极坐标与直角坐标之间变换的原理和应用示例
            极坐标变换的原理是将平面上的点从直角坐标系转换为极坐标系，或者从极坐标系转换为直角坐标系。以下是关于极坐标变换原理的详细解释：一、极坐标系的基本概念        在极坐标系中，一个点的位置由两个参数确定：径向距离（ρ）和极角（θ）。        （1）......
  • 科普文：算法和数据结构系列【高效的字符串检索结构：字典树Trie树原理、应用及其java示例
    概叙科普文：算法和数据结构系列【算法和数据结构概叙】-CSDN博客科普文：算法和数据结构系列【非线性数据结构：树Tree和堆Heap的原理、应用、以及java实现】-CSDN博客科普文：算法和数据结构系列【树：4叉树、N叉树】_动态维护四叉树-CSDN博客科普文：算法和数据结构系列【二叉树总结......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99