0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙OS开发:【一次开发,多端部署】(布局能力简介)

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-05-25 16:32 次阅读

布局简介

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

名称简介 开发前请熟悉鸿蒙开发指导文档:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]点击或者复制转到。
自适应布局当外部容器大小发生变化时,元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。当前自适应布局能力有7种:[拉伸能力]、[均分能力]、[占比能力]、[缩放能力]、[延伸能力]、[隐藏能力]、[折行能力]。自适应布局能力可以实现界面显示随外部容器大小连续变化。
响应式布局当外部容器大小发生变化时,元素可以根据断点、栅格或特定的特征(如屏幕方向、窗口宽高等)自动变化以适应外部容器变化的布局能力。当前响应式布局能力有3种:[断点]、[媒体查询]、[栅格布局]。响应式布局可以实现界面随外部容器大小有级不连续变化,通常不同特征下的界面显示会有较大的差异。

说明: 自适应布局多用于解决页面各区域内的布局差异,响应式布局多用于解决页面各区域间的布局差异。
HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿

搜狗高速浏览器截图20240326151547.png

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

  • 自适应布局常常需要借助[Row组件]、[Column组件]或[Flex组件]实现。
    image-20220922185907892
  • 响应式布局常常与[GridRow组件]、[List组件]、[Swiper组件]或[Tabs组件]搭配使用。
    image-20220922190217247

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

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 移动开发
    +关注

    关注

    0

    文章

    52

    浏览量

    9651
  • 鸿蒙系统
    +关注

    关注

    183

    文章

    2633

    浏览量

    66118
  • HarmonyOS
    +关注

    关注

    79

    文章

    1964

    浏览量

    29953
  • OpenHarmony
    +关注

    关注

    25

    文章

    3628

    浏览量

    16030
  • 鸿蒙OS
    +关注

    关注

    0

    文章

    188

    浏览量

    4353
收藏 人收藏

    评论

    相关推荐

    HarmonyOS开发案例:【一次开发多端部署(视频应用)】

    者提供了“一次开发多端部署”的系统能力,让开发者可以基于
    的头像 发表于 05-11 15:41 1273次阅读
    HarmonyOS<b class='flag-5'>开发</b>案例:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>(视频应用)】

    HarmonyOS开发案例:【一次开发多端部署-音乐专辑】

    基于自适应和响应式布局,实现一次开发多端部署音乐专辑页面。
    的头像 发表于 05-13 16:48 612次阅读
    HarmonyOS<b class='flag-5'>开发</b>案例:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>-音乐专辑】

    鸿蒙OS开发:【一次开发多端部署】应用(自适应布局

    针对常见的开发场景,方舟开发框架提炼了七种自适应布局能力,这些布局可以独立使用,也可多种布局叠加
    的头像 发表于 05-24 10:34 897次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】应用(自适应<b class='flag-5'>布局</b>)

    鸿蒙OS开发:【一次开发多端部署】(多天气)项目

    本示例展示个天气应用界面,包括首页、城市管理、添加城市、更新时间弹窗,体现一次开发多端部署能力
    的头像 发表于 05-20 14:59 776次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(<b class='flag-5'>一</b>多天气)项目

    鸿蒙OS开发:【一次开发多端部署】(音乐专辑主页)

    本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局
    的头像 发表于 05-21 14:48 636次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(音乐专辑主页)

    鸿蒙OS开发:【一次开发多端部署】(音乐专辑页面)

    基于自适应和响应式布局,实现一次开发多端部署音乐专辑页面。
    的头像 发表于 05-25 16:21 687次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(音乐专辑页面)

    鸿蒙OS开发:【一次开发多端部署】(视频应用)

    者提供了“一次开发多端部署”的系统能力,让开发者可以基于
    的头像 发表于 05-25 16:29 4419次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(视频应用)

    鸿蒙OS开发:【一次开发多端部署】(自适应布局

    针对常见的开发场景,方舟开发框架提炼了七种自适应布局能力,这些布局可以独立使用,也可多种布局叠加
    的头像 发表于 05-25 16:36 1603次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(自适应<b class='flag-5'>布局</b>)

    鸿蒙OS开发:典型页面场景【一次开发多端部署】实战(音乐专辑页2)

    本示例使用[一次开发多端部署]中介绍的自适应布局能力和响应式
    的头像 发表于 05-25 16:47 1995次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:典型页面场景【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】实战(音乐专辑页2)

    鸿蒙OS开发:典型页面场景【一次开发多端部署】实战(设置典型页面)

    本示例展示了设置应用的典型页面,其在小窗口和大窗口有不同的显示效果,体现一次开发多端部署能力
    的头像 发表于 05-27 09:36 1043次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:典型页面场景【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】实战(设置典型页面)

    HarmonyOS\"一次开发多端部署\"优秀实践——玩机技巧,码上起航

    工程一次开发上架,即可多端按需部署。公共能力层支持网络框架、工具类、数据管理等能力。特性层抽象出
    发表于 08-30 18:14

    华为开发者大会2021:一次开发 多端部署

    一次开发 多端部署使能开发者从单设备生态跨入多设备生态!
    的头像 发表于 10-22 15:09 1604次阅读
    华为<b class='flag-5'>开发</b>者大会2021:<b class='flag-5'>一次</b><b class='flag-5'>开发</b> <b class='flag-5'>多端</b><b class='flag-5'>部署</b>

    华为开发者大会2021:软件部总裁龚体 鸿蒙系统 一次开发 多端部署 万物互连

    华为开发者大会2021:鸿蒙系统 一次开发 多端部署 万物互连 在华为
    的头像 发表于 10-22 15:09 4461次阅读
    华为<b class='flag-5'>开发</b>者大会2021:软件部总裁龚体 <b class='flag-5'>鸿蒙</b>系统 <b class='flag-5'>一次</b><b class='flag-5'>开发</b> <b class='flag-5'>多端</b><b class='flag-5'>部署</b> 万物互连

    鸿蒙OS开发:【一次开发多端部署】(多设备自适应能力)简单介绍

    本示例是《一次开发多端部署》的配套示例代码,展示了[页面开发一多能力],包括自适应
    的头像 发表于 05-21 14:59 2192次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】(多设备自适应<b class='flag-5'>能力</b>)简单介绍

    鸿蒙OS开发:【一次开发多端部署】( 设置app页面)

    本示例展示了设置应用的典型页面,其在小窗口和大窗口有不同的显示效果,体现一次开发多端部署能力
    的头像 发表于 05-21 14:56 865次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>开发</b>:【<b class='flag-5'>一次</b><b class='flag-5'>开发</b>,<b class='flag-5'>多端</b><b class='flag-5'>部署</b>】( 设置app页面)