[HarmonyOS Next示例代码] 鸿蒙UI开辟 - 一多分栏控件
鸿蒙UI开辟 - 一多分栏控件 源码下载地点先容
本示例分别展示了多场景下，一多分栏控件的响应式变化效果。
本示例分别用到了SideBarContainer组件与Navigation组件，对应使用场景如下：
[*]A+B+C：即SideBarContainer组件组合Navigation组件
[*]A+C：SideBarContainer组件
[*]B+C：Navigation组件
效果预览
本示例在预览器中的效果：
A+B+C:
360vp600vp840vp https://img-blog.csdnimg.cn/img_convert/c1a92dad3e22c9720416d0bec9288184.png
https://img-blog.csdnimg.cn/img_convert/31ee572bd73fcedcbeb12e5f71572a61.png
https://img-blog.csdnimg.cn/img_convert/2958c345d5540f9c385314d2d44e7480.png
A+C:
360vp600vp https://img-blog.csdnimg.cn/img_convert/80ab63b7c5f9c8cfdd3a240f48f9ee38.png
https://img-blog.csdnimg.cn/img_convert/a5df09fc61ca41ddbc9841e85b814aa4.png
B+C:
360vp600vp https://img-blog.csdnimg.cn/img_convert/6b1467d6d84a2479a9abde77edf4e44c.png
https://img-blog.csdnimg.cn/img_convert/2a9d5d2e8186885dd37c06ef839e438b.png
使用分析：
1.在预览器中查看页面效果
2.在预览器中开启窗口拖拽模式，拖动窗口变化，可以查看组件的响应式变化，如下图所示：
https://img-blog.csdnimg.cn/img_convert/ffca9901eaf9554044f6c8015736d478.png
工程目录
├──entry/src/main/ets // 代码区
│├──application
││├──MailBox.ets // 邮箱
││├──PhotoAlbum.ets // 图库
││└──Settings.ets // 设置
│├──common
││├──BreakpointSystem.ets // 媒体查询
││├──MailContent.ets // 邮箱详情
││├──MailNavigation.ets // 邮箱导航
││├──MailSideBar.ets // 邮箱侧边栏
││├──PhotoContent.ets // 图库详情
││├──PhotoSideBar.ets // 图库侧边栏
││├──SettingItem.ets // setting设置项
││└──WlanItem.ets // Wlan详情页
│├──entryability
││└──EntryAbility.ets
│├──model
││└──dataType.ets // 侧边栏菜单数据类型
│└──pages
│ └──Index.ets // 首页
└──entry/src/main/resources // 应用资源目录
具体实现
[*] SideBarContainer组件，主动隐藏侧边栏的功能是由minContentWidth与minSideBarWidth属性实现的。当设置SideBarContainer组件组件的表现范例为SideBarContainerType.AUTO,而且窗口宽度达到minContentWidth + minSideBarWidth的界限值时，侧边栏主动隐藏。
[*] Navigation组件，主动隐藏侧边栏的功能是由minContentWidth属性实现的。当Navigation的内容地域达到minContentWidth设置的值时，navBar主动隐藏。
响应式规则
场景一：A+B+C
[*]预览器窗口宽度>840vp时，表现A、B、C三列，放大缩小时，优先变化C列
[*]预览器窗口宽度<=840vp而且>600vp时，表现B、C两列，放大缩小时，优先变化C列
[*]预览器窗口宽度<=600vp而且>360vp时，仅表现C列
场景二：A+C
[*]预览器窗口宽度>600vp时，表现A、C三列，放大缩小时，优先变化C列
[*]预览器窗口宽度<=600vp而且>360vp时，仅表现C三列
场景三：B+C
[*] 预览器窗口宽度>600vp时，表现B、C三列，放大缩小时，优先变化C列
[*] 预览器窗口宽度<=600而且>360vp时，仅表现C三列
相关权限
不涉及。
依靠
不涉及
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]