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

server/2024/9/23 9:14:20/

布局基础运用案例

平级导航的复合网格视图

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

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

一多-布局1

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

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

一多-布局2

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

一多-布局3

层级导航的列表视图

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

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

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

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

专辑详情页面

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

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

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

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

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

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

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

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

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


http://www.ppmy.cn/server/41974.html

相关文章

springboot集成dubbo实现微服务系统

目录 1.说明 2.示例 3.总结 1.说明 dubbo官网:https://cn.dubbo.apache.org/zh-cn/ Apache Dubbo 是一款 RPC 服务开发框架,用于解决微服务架构下的服务治理与通信问题,支持多种语言,官方提供了 Java、Golang 等多语言 SDK 实…

Linux|如何允许 awk 使用 Shell 变量

引言 当我们编写 shell 脚本时,我们通常会在脚本中包含其他较小的程序或命令,例如 awk 操作。就 Awk 而言,我们必须找到将一些值从 shell 传递到 Awk 操作的方法。 这可以通过在 Awk 命令中使用 shell 变量来完成,在本文中&#x…

如何在阿里云申请免费SSL证书(三个月有效)

SSL证书主要用于建立Web服务器和客户端间可信的HTTPS协议加密链接,以防止数据在传输过程中被篡改,避免信息泄露。阿里云提供了多种品牌和类型的SSL证书,以满足不同用户的需求。您可以根据自己的预算、域名类型以及网站类型,选择购…

Redis20种使用场景

Redis20种使用场景 1缓存2抽奖3Set实现点赞/收藏功能4排行榜5PV统计(incr自增计数)6UV统计(HeyperLogLog)7去重(BloomFiler)8用户签到(BitMap)9GEO搜附近10简单限流11全局ID12简单分…

机器学习(3)

目录 3-1线性回归 3-2最小二乘解 3-3多元线性回归 3-4广义线性模型 3-5对率回归 3-6对率回归求解 3-7线性判别分析 3-8LDA的多类推广 3-9多分类学习基本思路 3-10类别不平衡 3-1线性回归 线性模型为什么重要? 人类在考虑问题时,通常…

创新指南 | 企业AI战略 实施方案探讨(上):如何构建基于AI的新商业模型和业务场景

2023年以ChatGPT为代表的生成式AI推出以来,从投资界到企业界都掀起了一股热潮。那么从企业角度来看,生成式AI到底能为业务带来哪些增量呢?企业如何构建基于AI的商业模式并进行落地实施呢? 企业AI战略 实施方案探讨分为上下两篇&am…

人脸识别之bbox【det_10g】-ncnn(c++)

模型描述 det_10g是insightface 人脸框图和人脸关键点的分类,最终能够得到人脸框图bbox,分值还有人脸五官(眼x2、鼻子x1、嘴巴x2) 由于我这里没有采用最终结果,通过onnx转换为ncnn,所以后面的步骤结果丢弃…

安全关闭Tcp连接

close与shutdwon int close(int sockfd);关闭sokcet,这里注意:当程序调用close关闭socket的时候,如果缓冲区中仍然有数据的话,协议栈会发送RST包代替FIN包,丢弃缓冲的数据,强行关闭连接 int shutdown(int sockfd, int howto);该…