ToB企服应用市场:ToB评测及商务社交产业平台

标题: [HarmonyOS Next示例代码]一多导航栏 [打印本页]

作者: 道家人 时间: 6 天前
标题: [HarmonyOS Next示例代码]一多导航栏
MultiNavBar: 本示例展示了导航组件在差别设备形态下的样式。

HarmonyOS next 示例代码全集

一多导航栏

先容

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

在sm设备上，以tabs形式展示，内容、导航为上下样式布局，通过点击底部tabs切换内容；
在md/lg设备上，以SideBarContainer形式展示，内容、导航为左右布局，通过点击侧边一二级菜单举行内容切换。

本示例使用一次开发多端摆设中先容的自适应布局能力和响应式布局能力举行多设备（或多窗口尺寸）适配，主要通过组件提供窗口断点变乱，包管应用在差别设备或差别窗口尺寸下可以正常显示。
预览结果

本示例在预览器中的结果：
SM设备MD设备LG设备

侧边栏折叠侧边栏展开

使用阐明：

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

工程目录

├──entry/src/main/ets // 代码区
│ ├──common
│ │ ├──BreakpointSystem.ets // 媒体查询
│ │ ├──CommonMainTabs.ets // 一级Tabs
│ │ ├──CommonSubTabs.ets // 二级Tabs
│ │ ├──Configuration.ets // 样式配置
│ │ ├──RecommendationList.ets // 推荐页面
│ │ └──SideBarController.ets // 侧边栏控制器
│ ├──entryability
│ │ └──EntryAbility.ets
│ ├──model
│ │ ├──MenuType.ets // 侧边栏菜单数据类型
│ │ ├──SideListData.ets // 侧边栏数据
│ │ └──StyleType.ets // 风格样式类型
│ └──pages
│ └──AppStore.ets // 首页
└──entry/src/main/resources // 应用资源目录

复制代码

具体实现

本示例先容如何使用自适应布局能力和响应式布局能力适配差别尺寸窗口,将页面分拆为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.内容浏览的一连性，举行窗口切换时，内容区域的浏览进度可以保持，不会举行重新刷新。
相关权限

不涉及。
依靠

不涉及
约束与限制

1.本示例仅支持标准体系上运行，支持设备：华为手机。
2.HarmonyOS体系：HarmonyOS NEXT Developer Beta1及以上。
3.DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
4.HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)