在本篇内容中,您将会让您的应用可以在不同尺寸的设备上美观地运行,而无需另外开发多套代码,这就是“一次开发,多端部署”。
根据本教程学习,您可以选择从上一教程结束时构建完成的项目开始,也可以直接运行QS11_StartingPoint文件夹中的项目。
快速入门案例中主要有四个界面,依次分别为:快速入门页、课程学习页、知识地图页、技术文章详情页。接下来将会依次讨论各个页面如何在不同设备上呈现不一样的效果。
快速入门页界面效果与实现方案分析。快速入门页作为整个快速入门案例的第一个界面,涉及到了许多的一多能力,界面设计图如右图所示,我们将快速入门页分为了四个部分,此处以手机效果为示例。
实现方案可以参考下表:
区域编号 |
简介 |
实现方案 |
1 |
底部/侧边页签 |
结合断点变化修改Tabs的参数与属性,主要涉及Tabs的barPosition参数与vertical属性。barPosition参数可以控制Tabs的页签位置,vertical属性可以控制Tabs页签的横纵显示。 |
2 |
快速入门Banner轮播图 |
结合断点使用Swiper组件的displayCount属性来控制一页内的元素显示数量,使用nextMargin属性控制未完全显示的部分的宽度,使用indicator控制导航点指示器是否显示与显示效果。 |
3 |
赋能套件 |
使用Grid组件的一多能力结合断点实现。 |
4 |
入门教程 |
结合断点使用List组件的lanes属性控制列表组件的显示列数以及列间距。 |
快速入门的第二个页签“课程学习”页签,其在Web页面内实现了一多,不涉及HarmonyOS侧的一多能力,故此不在这里讨论
第三个页签“知识地图”主要涉及到Navigation的分栏显示与List组件的内容在不同设备尺寸上呈现不同的列数显示,手机设备效果图:
技术文章详情界面设计与实现方案分析。技术文章详情页主要为加载在线的Web资源来实现界面的效果展示。不涉及到一多相关的内容,故此不在此处讨论。
根据以上分析,在快速入门案例中的一多中涉及到的组件主要包括:List、Tabs、Swiper、Grid、Navigation。
要进入一多的开发,首先需要我们了解一下断点的概念。断点本质上就是将不同的应用窗口宽度划分为不同的范围,这样既能减少在进行界面设计时考虑的因素,也简化了一多的开发。
理解断点。断点以应用窗口宽度为切入点,将应用窗口在宽度维度上分成了几个不同的区间即不同的断点,在不同的区间下,开发者可根据需要实现不同的页面布局效果。具体的断点与应用窗口宽度对应关系如下所示。
断点名称 |
取值范围(vp) |
xs |
[0, 320) |
sm |
[320, 600) |
md |
[600, 840) |
lg |
[840, +∞) |
开发者可以自行根据需要改变取值范围,或者添加断点,例如我们希望区分出平板设备与更大尺寸设备,仅有一个lg断点是不够的,需要再加入一个xl断点,开发者也可以根据实际需要在后面再新增xxl断点等,但如无必要不建议额外增加断点。
断点名称 |
取值范围(vp) |
xs |
[0, 320) |
sm |
[320, 600) |
md |
[600, 840) |
lg |
[840, 1500) |
xl |
[1500, +∞) |
vp是virtual pixel(虚拟像素)的缩写,是常用的长度单位。
获取当前断点以及监听断点变化。将本章节对应工程目录下载包里的QS11_Resources目录下的BreakpointSystem.ets文件复制到commons/utils/src/main/ets/utils目录下,然后在commons/utils/Index.ets文件中进行导出,由于在之前的文章中已经进行过模块依赖的配置,只需要导出,其他模块就能引用到对应的工具类。
该文件使用了媒体查询实现了断点变化的监听,将断点值设置到了全局的AppStorage中,方便各个组件进行使用,只需要使用@StorageProp或者@StorageLink关联即可自动更新断点值,之后的内容中会有写法示例,同时实现了根据断点进行选值的方法。该方法需要创建一个BreakpointType实例,然后调用getValue方法并传入当前的断点值。实例如代码所示,注改代码不需要书写,只做帮助理解文件作用之用:
底层实现为根据传入的断点值返回对应的配置的值,例如上面的代码效果是当传入的breakpoint为sm时,返回值为1,当传入的breakpoint为md时,返回值为2。这在进行一多开发中是非常有用的,很多时候我们需要根据断点不同,设置不同的参数值来达到不同的效果,都可以考虑采用这个方式。
注册监听与解除监听。在导出该文件后,我们需要在界面的入口文件中使用注册监听功能,在该案例中为products/default/src/main/ets/pages/Index.ets文件,在该文件中首先需要我们导入BreakpointSystem, BreakpointTypeEnum,然后在组件中创建出BreakpointSystem的实例,在之后需要我们在aboutToAppear回调中注册媒体事件的监听,在aboutToDisappear时解除监听。这样就能满足当应用启动时,媒体查询监听生效,界面可以正常使用断点,当应用退出,会销毁掉对应的事件监听。
- // commons/utils/Index.ets
- export { BreakpointSystem, BreakpointTypeEnum, BreakpointType } from './src/main/ets/utils/BreakpointSystem';
首先让我们看一下Tabs组件如何进行一多的适配。 在“组件路由导航”文章中,我们实现了在手机设备上的TabBar样式,也就是当前文章中的sm断点,接下来我们会实现md与lg断点下的Tab栏效果。
实现Tabs一多的适配,首先需要使用@StorageProp装饰器获取到全局的断点值。然后就可以使用断点值来进行一多适配了。
Tabs组件主要依靠以下两个值来实现一多的适配:
barPosition参数,可以控制Tabs的页签位置,该属性有两个可选值,分别为BarPosition.Start和BarPosition.End。
vertical属性,可以控制Tabs页签的横纵显示,当该值为false时为横向Tabs,设置为true时为纵向Tabs。
两者结合的效果为:
barPosition为BarPosition.End,vertical属性为false时,页签位于容器底部,即此处设计图中的sm与md段断点的情况。
barPosition为BarPosition.Start,vertical属性为true时,页签位于容器左侧,即此处的lg断点的情况。
barPosition为BarPosition.End,vertical属性为true时,页签位于容器右侧,在该应用中不涉及。
barPosition为BarPosition.Start,vertical属性为false时,页签位于容器顶部。在该应用中不涉及。
根据以上的分析,我们只需要设置barPosition参数在lg断点时为BarPosition.start,在sm、md断点时为BarPosition.end,同时设置vertical属性在lg断点时为true,在sm、md断点时为false即可实现设计图中的效果。
接下来我们会适配快速入门页中的顶部Banner,在之前的内容中我们已经实现了在sm断点下的效果,接下来我们需要实现在md与lg断点下的效果。效果图如下:
快速入门案例中Swiper组件的一多适配主要依靠以下属性:
displayCount属性。该属性用于设置Swiper视窗内元素显示个数,例如根据此处的设计图需要分别设置displayCount属性在sm、md、lg断点下分别为1、2、2。
indicator属性。该属性用于控制导航点指示器的效果,支持圆点、数字、以及不启用,根据设计图需要设置在sm断点下indicator属性Indicator.dot()表示使用圆形的导航点指示效果,并配置选中颜色selectColor与一般颜色color,在md,lg断点下设置为false,表示关闭导航点指示器效果,这样就能满足设计要求。
nextMargin属性。该属性可以控制后一项的漏出部分的长度,在sm、md、lg断点下对应的值分别为0、12vp、266vp。注意该值需要设置SwiperDisplayMode为STRETCH模式时才会生效。
在“网格和列表组件的使用”文章中我们完成了在手机设备上的Grid组件的效果,接下来需要我们完成在md、lg断点下的适配。
控制GridItem在不同设备上具有不同的宽度。首先由于网格的每一个网格项在不同设备上的宽度不尽相同,在sm、md、lg断点下分别呈现160、164、180的尺寸,于是我们可以使用断点选值的方式来设置GridItem的宽度属性。
控制列间距。其次,网格组件的列间距在不同设备上也不一致,在sm、md、lg断点尺寸下分别列间距分别为8、12、16,可以使用columnsGap属性配合断点选值来实现。
然后让我们看一下List组件如何进行一多的适配。
“快速入门”页签列表效果展示主要包含手机、折叠屏、平板设备,效果图分别展示如下。
在快速入门页面中入门教程部分使用了List组件来实现,以上设计图中需要我们实现不同断点情况下,List组件呈不同的列数进行显示。
开发者可以在之前的features/quickstart/src/main/ets/view/TutorialView.ets文件中,对List组件使用lanes属性,该属性有两个参数。第一个参数为纵轴方向的列数,第二个参数为列间距。此处根据设计图,我们需要分别在sm、md、lg断点下使得lanes属性的第一个参数分别为1、2、3,第二个参数分别为0、12、16。
知识地图页在手机设备上的效果:
实现知识地图页列表的一多。在features/map/src/main/ets/view/KnowledgeMapContent.ets文件中设置List组件在sm、md、lg断点下List组件分别呈1列、1列、2列显示。我们依然可以使用List的lanes属性结合断点来实现效果。
在“组件路由导航”文章中,我们实现了在手机设备上的组件路由跳转,即该文章中的sm断点下的效果,接下来需要实现在md、lg断点下的效果。
开发者可以通过配置Navigation的mode属性为NavigationMode.Auto,即自适应模式,在该模式下当设备宽度大于600vp时,Navigation组件将自动采用分栏模式,反之则会采用单页面模式。
最后,上述的一多只介绍了相关的典型部分,该应用中还实现了类似于宽高、边距等基础属性在不同设备上的不同效果,实现方案也都可以采用断点选值的方案来进行实现,故此不再重复赘述,开发者可以下载本节内容的代码包自行学习,值得注意的是本节内容代码包除了实现了一多,还做了代码的规范化整理,开发者也可以自行了解。