鸿蒙应用布局ArkUI【基础运用案例】

布局基础运用案例

平级导航的复合网格视图

平级导航的复合网格视图常出现在同时展示多种不同内容的界面。

例如,市场类应用作为典型的平级导航,其首页不同板块采用了不同布局能力。

一多-布局1

  • 标题栏与搜索栏:因元素单一、位置固定在顶部,因此适合采用自适应拉伸,并在大尺寸界面中从纵排变为横排,充分利用顶部区域。
  • 运营横幅:在小设备上默认为多张轮播展示,随宽度变化采用自适应缩放,在中尺寸界面通过重复布局变为并排多张。
  • 图标型网格:对于数量固定、且子内容重要程度相同的网格,需保证完全展示,可采用均分拉伸。对于数量不限的网格,则采用自适应延伸,在更大宽度上展示更多数量。
  • 底部导航栏:导航类控件本身综合了均分和折行,在宽度变化时能占用均等宽度并在足够宽度下并排,当在大尺寸界面中,挪移到左边,使不同页签距离更近、同时符合视觉走向。
  • 开发前请熟悉鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

在横竖屏切换时,也保持了一致的布局能力,实际上完成了大尺寸和中尺寸的切换。

一多-布局2

当界面出现在智慧屏上,虽然同是大尺寸界面,为了符合设备样式和遥控器交互规则,搜索栏转化为图标入口,导航栏挪移到页面上部。

一多-布局3

层级导航的列表视图

层级导航的列表视图常出现在多类简单信息并列或多入口业务入口的界面。

例如,设置类应用作为典型的层级导航,其列表控件采用自适应拉伸。

布局基础案例-层级导航-设置

在中尺寸设备中,为避免中间区域空白过大,采用缩进布局,大尺寸设备中,为充分利用横向空间,建议采用栅格系统形成分栏效果,并让列表元素在各自区域保持拉伸。

专辑详情页面

专辑详情不限于展示音乐内容,也用于展示视频、短视频、电台、书本等内容类合集。

例如,歌单类界面作为典型的内容垂类页面,其总体分为标题栏、歌单信息、歌单操作、歌单列表、播放栏几个板块。

  • 标题栏:采用自适应拉伸。
  • 歌单信息:采用自适应缩放,并在中尺寸界面进行缩进处理使内容呈现协调。
  • 歌单操作:板块内部采用均分拉伸,在小尺寸设备上利用纵向空间、中尺寸设备上自适应缩放,挪移到歌单封面下面。
  • 歌单列表:板块内部采用挪移布局,在中尺寸设备上挪移到歌单信息右边。
  • 播放栏:固定在界面底部,保持左右拉伸即可。

页面布局-布局基础案例-歌单详情页面布局能力360-800vp

在横竖屏切换时,完成了中尺寸和大尺寸的切换。歌单列表板块进行挪移的同时,内部采用了重复布局。

歌单信息和歌单操作板块因较小宽高比,挪移到上下排布。

页面布局-布局基础案例-歌单详情页面布局能力800-1280vp

当界面出现在智慧屏上,为了符合沉浸简约的设备信息和遥控器交互规则,将部分歌单信息替代原来标题栏的位置,并取消播放栏。同时歌单列表居左,更方便遥控器选择。

页面布局-布局基础案例-歌单详情页面布局能力1280-1920vp

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/704156.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【easyX】动手轻松掌握easyX 1

01 简单绘图 在这个程序中&#xff0c;我们先初始化绘图窗口。其次&#xff0c;简单绘制两条线。 #include <graphics.h>//绘图库头文件 #include <stdio.h> int main() {initgraph(640, 480);//初始化640✖480绘图屏幕line(200, 240, 440, 240);//画线(200,240)…

win11快速安装mysql数据库系统

win11快速安装mysql数据库系统 1、下载 1.1 打开官网 1.2 向下滚动页面 1.3 进入下载选项 1.4 下载8.0.4 LTS 1.5 开始下载 1.6 下载中 2、解压 大家注意&#xff0c;此时解压后目录是没有data目录的。 3、数据库初始化 3.1 管理员身份打开CMD 开始菜单上&#xff0c;输入…

【记录】docker笔记(五):Docker网络-Network Namespace

Docker 网络理论基础 要了解docker网络&#xff0c;先了解如下基础概念。 Network Namespace Docker 网络的底层原理是 Linux 的 Network Namespace &#xff0c;所以对于 Linux Network Namespace 的理解对 Docker 网络底层原理的理解非常重要。 简介 Network Name…

【Qt】widget圆角,styleSheet

仅配置widget&#xff0c;不设置其子组件。 #widget{background-color: rgba(255, 255, 255, 100); border-top-left-radius: 20; border-top-right-radius: 20; border-bottom-left-radius: 20; border-bottom-right-radius: 20;}

汇舟问卷:5年专业经验,海外渠道查无需烦恼!

大家好&#xff0c;我是汇舟问卷&#xff0c;拥有五年的行业经验&#xff0c;专注于海外问卷渠道查。 在海外问卷渠道查领域&#xff0c;我们拥有专业的知识和经验。无需为购买大量海外邮箱而烦恼&#xff0c;更无需担忧账号被封禁的风险。我们提供全天候24小时的服务&#xf…

USB-OTG:1、OTG原理介绍

目录 &#x1f345;点击这里查看所有博文 随着自己工作的进行&#xff0c;接触到的技术栈也越来越多。给我一个很直观的感受就是&#xff0c;某一项技术/经验在刚开始接触的时候都记得很清楚。往往过了几个月都会忘记的差不多了&#xff0c;只有经常会用到的东西才有可能真正记…

Redis实战—验证码登录注册

目录 基于Session Controller层 Service层 ServiceImpl层 ​编辑校验登录状态 ThreadLocal 登录拦截器 添加拦截器到Config Controller层实现 基于Redis ServiceImpl 新增刷新拦截器 添加拦截器到Config 基于Session Controller层 /*** 发送手机验证码*/PostMappi…

如何搭建本地DNS服务器

一、搭建本地DNS服务器 1.初始化设置 systemctl disable --now firewalld.service #关闭防火墙&#xff0c;并开机不自启 setenforce 0 #临时关闭selinux防火墙 vim /etc/selinux/config …

GPU学习记一下线程分组相关

在compute的时候&#xff0c;是要dispatch一个数量的代表分了多少块任务集&#xff0c;dispatch的块内部也是有一个数量的&#xff0c;那么这些值怎么取的呢 内部&#xff0c;N卡32 外面dispatch的数量就是all/32 然后细说这个值 这有一个叫core的东西&#xff0c;就是相当于th…

Autosar架构

蓝框那种叫component&#xff0c;绿框的叫function cluster。 接口 有三种接口&#xff0c;RTE跟SWC之间链接的叫Autosar Interface&#xff0c;RTE跟BSW的Components链接是Standardized Interface&#xff0c;RTE跟BSW的services链接的是Standardized Autosar Interface。 St…

详解xlsxwriter 操作Excel的常用API

我们知道可以通过pandas 对excel 中的数据进行处理分析&#xff0c;但是pandas本身对格式化数据方面提供了很少的支持&#xff0c;如果我们想对pandas进行数据分析后的数据进行格式化相关操作&#xff0c;我们可以使用xlsxwriter&#xff0c;本文就对xlsxwriter的常见excel格式…