harmony 鸿蒙布局简介

  • 2022-08-09
  • 浏览 (975)

布局简介

布局可以分为自适应布局和响应式布局,二者的介绍如下表所示。

名称 简介
自适应布局 当外部容器大小发生变化时,元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。当前自适应布局能力有7种:拉伸能力均分能力占比能力缩放能力延伸能力隐藏能力折行能力。自适应布局能力可以实现界面显示随外部容器大小连续变化。
响应式布局 当外部容器大小发生变化时,元素可以根据断点、栅格或特定的特征(如屏幕方向、窗口宽高等)自动变化以适应外部容器变化的布局能力。当前响应式布局能力有3种:断点媒体查询栅格布局。响应式布局可以实现界面随外部容器大小有级不连续变化,通常不同特征下的界面显示会有较大的差异。

说明: 自适应布局多用于解决页面各区域内的布局差异,响应式布局多用于解决页面各区域间的布局差异。

自适应布局和响应式布局常常需要借助容器类组件实现,或与容器类组件搭配使用。

image-20220922185907892

image-20220922190217247

接下来将依次介绍自适应布局和响应式布局,同时结合实际,通过典型布局场景以及典型页面场景详细介绍两种布局能力的用法。

你可能感兴趣的鸿蒙文章

harmony 鸿蒙一次开发,多端部署

harmony 鸿蒙自适应布局

harmony 鸿蒙应用市场首页

harmony 鸿蒙案例应用

harmony 鸿蒙应用UX设计

harmony 鸿蒙功能开发的一多能力介绍

harmony 鸿蒙常见问题

harmony 鸿蒙前言

harmony 鸿蒙工程管理

harmony 鸿蒙交互归一

1  赞