鸿蒙OS开发:【一次开发,多端部署】(导航栏) 导航栏

一多导航栏

介绍

本示例展示了导航组件在不同设备形态下的样式。

  • 在sm设备上,以tabs形式展示,内容、导航为上下样式布局,通过点击底部tabs切换内容;
  • 在md/lg设备上,以[SideBarContainer]形式展示,内容、导航为左右布局,通过点击侧边一二级菜单进行内容切换。
  • 开发前请熟悉鸿蒙开发指导文档gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

本示例使用[一次开发多端部署]中介绍的自适应布局能力和响应式布局能力进行多设备(或多窗口尺寸)适配,主要通过组件提供窗口断点事件,保证应用在不同设备或不同窗口尺寸下可以正常显示。

预览效果

image.png
本示例在预览器中的效果:

image.png

使用说明:

  1. 打开首页,在IDE编辑器中打开预览器查看预览效果。
  2. 在预览器中开启窗口拖拽模式,拖动窗口变化,可以查看组件的响应式变化,如下图所示: 
  3. 手动自由拖拽窗口,将应用窗口在sm/md/lg三种设备形态下进行切换并查看预览效果。
  4. 在sm/lg窗口下,点击左上角图标进行侧边栏样式切换

工程目录

MultiNavBar/entry/src/main/ets/
|---model
|   |---MenuType.ets                       // 侧边栏菜单数据类型
|   |---SideListData.ets                   // 侧边栏数据
|---pages                                  
|   |---AppStore.ets                       // 首页
|---common                                    
|   |---BreakpointSystem.ets               // 媒体查询
|   |---CommonMainTabs.ets                 // 一级Tabs
|   |---CommonSubTabs.ets                  // 二级Tabs
|   |---Configuration.ets                  // 样式配置
|   |---RecommendationList.ets             // 推荐页面
|   |---SideBarController.ets              // 侧边栏控制器  `HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿`

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

具体实现

本示例介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口,将页面分拆为2部分。

整体布局

1.通过GridRow组件提供的断点事件,获取到当前窗口的断点,通过visibility属性将[Tabs]组件与[SideBarContainer]组件分别在sm/(md、lg) 形态下展示/隐藏。

2.同时通过断点,对组件设置不同的样式属性,以最优的效果展示。

侧边栏SideBar/底部TabsController

1.侧边栏内容布局通过Flex容器分别在sm/(md、lg)形态下进行横竖展示。

2.内容区域通过不同的窗口断点进行选择显隐。

3.md、lg形态侧边栏一级菜单对应sm形态最外层的TabsController组件、二级菜单对应里层的TabsController组件。

4.侧边栏同时存在两种形态list/tabs,通过侧边栏左上角图标切换,list模式下内容区域较小,根据窗口断点只显示图标/图标+文字,tabs模式下内容区域较大,显示图标+文字。

内容区域

1.Swiper组件通过获取窗口断点,设置displayCount属性,在不同窗口下显示不同数量的图片。

2.Gird组件通过获取窗口断点,设置columnsTemplate与rowsTemplate属性,在不同窗口下显示不同数量的Item。

3.内容浏览的连续性,进行窗口切换时,内容区域的浏览进度可以保持,不会进行重新刷新。

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

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

相关文章

RocketMQ学习(1) 快速入门

mq的一些前置知识和概念知识可以看这篇文章——SpringCloud入门(3) RabbitMQ,比如常见mq的对比等等,这篇文章不再赘述。 目录 RocketMQ概念、安装与配置docker配置 RocketMQ快速入门**同步消息消费模式 **异步消息*单向消息**延迟消息*顺序消息批量消息事…

大工作量LUAD代谢重编程模型多组学(J Transl Med)

目录 1,单细胞早期、晚期和转移性 LUAD 的细胞动力学变化 2,细胞代谢重编程介导的LUAD驱动恶性转移的异质性 3,模型构建 S-MMR评分管线构建 4,S-MMR 模型的预后评估 5, 还开发了S-MMR 评分网络工具 6&#xff0c…

Test-Preparation Phase 测试准备阶段介绍

测试准备阶段是确保测试过程顺利进行的基础阶段,对于DRAM(动态随机存取存储器)等复杂产品的测试尤为重要。以下是Test-Preparation Phase中关于Fault modeling(故障建模)、Test generation(测试数据生成)、Fault simulation(故障模拟)以及DFT&DFM(测试设计与可制…

Windows 使用技巧

Windows 使用技巧 ①局域网内共享文件 ②CTRL Y 和 CTRL Z ①局域网内共享文件 第一步: 选择要共享的文件(分享方操作) 第二步: 右键打开属性,选择共享(分享方操作) 第三步: …

k8s集群配置普通用户权限

集群管理员:负责管理 Kubernetes 集群的用户,拥有最高权限,可以对集群中的资源进行任何操作。 开发者:在 Kubernetes 集群中部署和管理自己的应用,可能有限制的权限,仅能管理特定的命名空间或资源。 第三…

简单得阴影引导实现

效果如下: 实现方式: 1、引入三方库: implementation io.github.razerdp:BasePopup:3.2.0 2、代码实现 class NewUserGuide3Popup : BasePopupWindow {constructor(activity: Activity) : super(activity)constructor(context: Context) : super(con…

js检验一个字符串是否是正确时间格式的工具方法

js检验一个字符串是否是正确时间格式的工具方法 (()> {/*** 检验字符串是否为时间格式* param {String} date 需要检验的时间格式* returns true 为时间格式,false 为非时间格式*/const isTimaFormat (date) > {if(!date) return false;try{const tempTime …

基于maxkey接入jeecgboot并实现账户同步

1. 注册应用 1.1 在统一认证中心注册第三方应用 1.1.1 填写应用名和登录地址 1.1.2 填写认证地址授权方式和作用域 1.1.3 选择权限范围并提交 1.2 配置访问权限 1.2.1 指定用户组 1.1.2 选择注册的应用 1.1.3 在单点登录认证页面查看添加的应用 1.3 同步一个第三方应用的账号…

VolWeb:集中式增强型数字取证内存分析平台

关于VolWeb VolWeb是一款最新开发的集中式增强型数字取证内存分析平台,该平台基于Volatility 3框架实现其功能,该工具旨在辅助广大研究人员执行安全分析和事件应急响应等任务。 VolWeb可以提供集中式、可视化的增强型网络应用程序,并提高安全…

详解 Scala 的泛型

一、协变与逆变 1. 说明 协变:Son 是 Father 的子类,则 MyList[Son] 也作为 MyList[Father] 的 “子类”逆变:Son 是 Father 的子类,则 MyList[Son] 作为 MyList[Father] 的 “父类”不变:Son 是 Father 的子类&…

车机壁纸生成解决方案,定制化服务,满足个性化需求

在数字化与智能化浪潮的推动下,汽车内部设计已不再仅仅满足于基本功能的需求,更追求为用户带来前所未有的视觉享受与沉浸式体验。美摄科技,凭借其在图像生成与处理领域的深厚积累,推出了一款创新的车机壁纸生成解决方案&#xff0…

【FISCO BCOS】二十一、JAVA与FISCO BCOS交互(节点前置篇)

目录 一、准备链和节点前置服务 二、准备合约 三、新建java工程 四、参照API官方

上海市计算机学会竞赛平台2022年10月月赛丙组算式求值(一)

题目描述 给定一个由正整数、加号、减号构成的表达式,请计算表达式的值。 输入格式 输入一个由 正整数、、- 构成的表达式 输出格式 单个整数:表示算式的值。 数据范围 数据保证 输入的字符串长度不超过 100,000100,000,其中出现的每…

代码随想录——左叶子之和(Leetcode404)

题目链接 BFS 队列 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right)…

磁珠笔记汇总

磁珠笔记汇总 磁珠是和电感很相似的器件。 电感磁珠单位亨(H)欧姆(Ω)是否储能存储能量消耗高频能量应用场景通常用于开关电源吸收高频,EMC保护如何看待损耗使用电感时希望损耗越小越好使用磁珠时是利用其损耗来消耗不需要的高频分量 一、磁珠的工作原理 磁珠与…

力扣刷题--2956. 找到两个数组中的公共元素【简单】

题目描述 给你两个下标从 0 开始的整数数组 nums1 和 nums2 &#xff0c;它们分别含有 n 和 m 个元素。 请你计算以下两个数值&#xff1a; 统计 0 < i < n 中的下标 i &#xff0c;满足 nums1[i] 在 nums2 中 至少 出现了一次。 统计 0 < i < m 中的下标 i &am…

【Linux】解决误操作libc.so.6导致的问题,补充:升级glibc注意事项

千万不要轻易动/usr/lib64/libc.so.6。 glibc是Linux系统中最底层的api&#xff0c;Linux几乎所有运行库都依赖glibc。/usr/lib64/libc.so.6属于glibc&#xff0c;在centos7中是个软链接。 一旦误删或误操作libc.so.6&#xff0c;或者glibc新版本不兼容等原因&#xff0c;都可…

C#-系统Timer会自动停止,使用线程进行连续性测试

文章速览 概述代码结构创建和执行线程中执行的方法停止线程 参考文章 坚持记录实属不易&#xff0c;希望友善多金的码友能够随手点一个赞。 共同创建氛围更加良好的开发者社区&#xff01; 谢谢~ 概述 接上片Timer计时器的文章&#xff1a;C#中System.Threading.Timer的使用。…

鸿蒙ArkUI-X跨语言调用说明:【平台桥接(@arkui-x.bridge)】

平台桥接(arkui-x.bridge) 简介 平台桥接用于客户端&#xff08;ArkUI&#xff09;和平台&#xff08;Android或iOS&#xff09;之间传递消息&#xff0c;即用于ArkUI与平台双向数据传递、ArkUI侧调用平台的方法、平台调用ArkUI侧的方法。 以Android平台为例&#xff0c;Ark…

揭开 SOCKS5 有哪些强大的功能?

在在线隐私和安全领域&#xff0c;SOCKS5 是一种多功能且功能强大的协议&#xff0c;为用户提供了一种无缝的方式来加密他们的互联网流量、绕过防火墙并以增强的匿名性和灵活性访问网络。无论您是担心在线监控、地理封锁还是数据隐私&#xff0c;了解如何利用 SOCKS5 的功能都可…