HarmonyOS 基础之PageSlider和PageFlipper 原创 精华
作者:盛禹
前言
众所周知,PageSlider是用于页面之间切换的组件,它通过响应滑动事件完成页面间的切换,而PageFlipper可能知道的人就比较少了,其实PageFlipper和PageSlider类似,都是视图切换组件,它们都继承自StackLayout,因此可以将多个component层叠在一起,每次只显示一个组件,当视图从一个component切换到另一个component时,PageFlipper支持指定动画效果。
区别:PageFlipper通过addComponent()添加component,可使用动画控制多个component之间的切换效果,是个轻量级的组件,适合展示少量静态数据;而PageSlide是由provider来提供component的,更适用复杂的视图切换,实现数据的动态加载。
下面是一个PageSlider和PageFlipper结合起来的使用效果,页面中间的卡片使用的是PageSlider,背景图片和底部的数字指示器用的是PageFlipper,通过回调将三个组件联动起来就实现了这样的效果:
正文
1.pageSlider
PageSlider可以说是鸿蒙中最常用的视图切换组件了,使用方法不用多做介绍,官方文档有详细的说明,这里主要说一下一个特殊的效果;
一屏多页效果
其实鸿蒙本身有提供一个setClipEnabled()的方法,作用是设置是否允许在组件超出其父布局时自动裁剪组件,理论上通过给pageSlider父布局设置setClipEnabled(false),加上给子组件设置合适的宽度可以实现一屏多页效果,但是经过测试并没达到效果,
这个方法我也单独拿出来在其他场景验证过确实无效,下面是验证的效果。
但是鸿蒙却提供了另外一个方法setPageMargin(),它的作用是设置PageSlider中子组件边距的,当传入一个合适的负数时(必须是负数),就能实现一屏同时显示多个子组件的效果:
动态设置缩放透明度变化
设置透明度和缩放比例就不细说了,主要就是在PageSlider子组件加载完成后和页面切换中的回调方法中改变alpha值和scale值,直接上代码:
设置两边的component透明度和缩放效果
2.PageFlipper(翻页器)
PageFlipper是一个翻页器,当它有两个或多个子组件时,切换过程中可以轻松设置入场动画和出场动画,以达到意想不到的效果。虽然PageFlipper的使用率远不及PageSlider,但这并不意味着PageFlipper就不强大,他能通过简单的代码实现许多动画效果,比如淘宝头条的效果,日历翻页效果,背景图淡入淡出效果等等;
常用方法
下面通过设置文字翻页效果来了解下它的使用方法:
结束
以上主要介绍了PageSlider和PageFlipper的一些简单使用,最后补充一个小功能,设置渐变效果,这个简单的效果可能很多人还不知道如何设置:
首先生成一个foreground_gradient.xml
然后给目标组件设置前景色即
更多原创内容请关注:开鸿 HarmonyOS 学院
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
文章不错,图也挺有意思的。
很实用的