更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com通过响应滑动事件，PageFlipper可能认识的人更少。其实PageFlipper和PageSlider类似，都是视图切换组件。它们都继承自StackLayout，因此可以将多个组件堆叠在一起，一次只显示一个组件，PageFlipper支持指定视图从一个组件切换到另一个组件时的动画效果。区别：PageFlipper通过addComponent()添加组件，可以使用动画来控制多个组件之间的切换效果。轻量级组件，适合显示少量静态数据；而PageSlide是provider提供的组件，比较适合复杂的。视图切换，实现数据的动态加载。下面是PageSlider和PageFlipper的组合。页面中间的卡片使用了PageSlider，背景图和底部的数字指示器使用了PageFlipper，通过回调将三个组件联系起来实现效果：Text1.pageSliderPageSlider可以说是最常用的鸿蒙视图切换组件。如何使用就不用介绍了。官方文档有详细说明。这里主要说一个特效。一屏多页效果其实鸿蒙本身就提供了一个setClipEnabled()方法，用于设置组件超出父布局时是否允许自动裁剪组件。设置合适的组件宽度可以实现一屏多页的效果，但是经过测试并没有达到这个效果。这个方法我也单独拿出来，在其他场景下验证过。确实无效。下面是验证效果。不过鸿蒙提供了另外一个方法setPageMargin()，用于设置PageSlider中子组件的边距。当传入一个合适的负数（必须为负数）时，它可以同时在一个屏幕上显示多个子组件。效果：动态设置缩放透明度变化。设置透明度和缩放比例我就不细说了。主要是在PageSlider子组件加载后和页面切换的回调方法中改变alpha值和scale值，直接添加代码：publicfinalclassAlphaScalePageTransformer{/***Zoom*/publicstaticfinalfloatINACTIVE_SCALE=0.8f;/***透明度*/publicstaticfinalfloatINACTIVE_ALPHA=0.5f;/***设置初始状态缩放和透明度**@paramchild*@paramposition*@paramcurrent*/publicstaticvoiddefaultPage(ListContainerchild,intposition,floatcurrent){if(position!=current){child.setAlpha(INACTIVE_ALPHA);child.setScaleX(INACTIVE_SCALE);child.setScaleY(INACTIVE_SCALE);}}/***设置滑动时的缩放和透明度**@paramchildList*@paramposition*@paramoffset*@paramdirection*/publicstaticvoidtransformPage(ListchildList,intposition,floatoffset,floatdirection){Componentchild=childList.get(position);floatscale=INACTIVE_SCALE+(1-INACTIVE_SCALE)*(1-Math.abs(offset));floatalpha=INACTIVE_ALPHA+(1-INACTIVE_ALPHA)*(1-Math.abs(offset));孩子d.setScaleX(scale);child.setScaleY(scale);child.setAlpha(alpha);if(direction>0){if(position=1){child=childList.get(position-1);}}scale=INACTIVE_SCALE+(1-INACTIVE_SCALE)*Math.abs(offset);alpha=INACTIVE_ALPHA+(1-INACTIVE_ALPHA)*Math.abs(offset);child.setScaleX(scale);child.setScaleY(scale);child.setAlpha(alpha);}}设置组件两侧透明度和缩放效果：//设置初始状态缩放和透明度AlphaScalePageTransformer.defaultPage(image,i,pageSlider.getCurrentPage());//设置页面切换时的缩放和透明度position).PageFlipper(PageTurner)PageFlipper是一个翻页器。当它有两个或多个子组件时，您可以在切换过程中轻松设置进入动画和退出动画，以达到意想不到的效果。虽然PageFlipper的使用率远不如PageSlider，但这并不代表PageFlipper不强大。他可以通过简单的代码实现很多动画效果，比如淘宝头条效果，日历翻页效果，背景图淡入淡出效果等等。常用方法：getCurrentComponent()//获取当前组件showNext()：显示下一个组件（如果当前子组件是最后一个，则显示第一个子组件）showPrevious()：显示上一个组件（如果当前子组件是第一个，显示最后一个子组件）getFlipInterval()：获取自动翻转时间setFlipPeriod(intperiod)：设置翻转周期startFlipping()：开启自动翻转stopFlipping()：停止自动翻转addComponent()：添加组件setIncomingAnimationA():设置转场动画setOutgoingAnimation():设置转场动画下面通过设置文本翻页效果来学习如何使用：publicclassIndicatorComponentextendsDirectionalLayout{/***textsize*/privatestaticfinalintTEXT_SIZE=130;/***动画时长*/privatestaticfinalintDURATION=600;privatePageFlippertextSwitcher;privateTexttextcomponent;/***ItemsCountcomponent**@paramcontext*@paramattrSet*/publicIndicatorComponent(Contextcontext,AttrSetattrSet){super(context,attrSet);init(context);}privatevoidinit(ComptextContext){setOritain.HORIZONTAL);textSwitcher=newPageFlipper(context);//理论上PageFlipper只需要添加两个子组件实现动画效果，但实际测试发现如果切换速度过快，会导致子组件连接不上，组件消失。,//因此通过实践又增加了几个子组件，防止bug出现的太快.textSwitcher.addComponent(createcomponentForTextSwitcher(context));textSwitcher.addComponent(createcomponentForTextSwitcher(context));textSwitcher.addComponent(createcomponentForTextSwitcher(context));textSwitcher.addComponent(createcomponentForTextSwitcher(context));addComponent(textSwitcher,newLayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT,ComponentContainer.LayoutConfig.MATCH_CONTENT));textcomponent=newText(上下文);textcomponent.setTextSize(TEXT_SIZE);textcomponent.setFont(Font.DEFAULT_BOLD);textcomponent.setTextColor(newColor(Color.getIntColor("#8cffffff")));addComponent(textcomponent,newLayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT,ComponentContainer.LayoutConfig.MATCH_CONTENT));}/***创建组件**@paramcontext上下文*@returntext*/privateTextcreatecomponentForTextSwitcher(Contextcontext){Texttext=newText(context);text.setTextSize(TEXT_SIZE);text.setFont(Font.DEFAULT_BOLD);text.setTextColor(Color.WHITE);text.setLayoutConfig(newPageFlipper.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT,PageFlipper.LayoutConfig.MATCH_CONTENT));returntext;}/***更新**@paramnewPosition新位置*@paramoldPosition旧位置*@paramtotalElementstotal*/publicvoidupdate(intnewPosition,intoldPosition,inttotalElements){textcomponent.setText("/"+totalElements);intoffset=textSwitcher.getHeight();if(newPosition>oldPosition){//设置组件进入和退出的动画textSwitcher.setIncomingAnimation(createPositionAnimation(-offset,0,0f,1f,DURATION));textSwitcher.setOutgoingAnimation(createPositionAnimation(0,offset,1f,0f,DURATION));}elseif(oldPosition>newPosition){textSwitcher.setIncomingAnimation(createPositionAnimation(offset,0,0f,1f,DURATION));textSwitcher.setOutgoingAnimation(createPositionAnimation(0,-offset,1f,0f,DURATION));}//显示下一个组件并执行动画textSwitcher.showNext();Texttext=(Text)textSwitcher.getCurrentComponent();text.setText(String.valueOf(newPosition+1)));}/***创建属性动画**@paramfromY*@paramtoY*@paramfromAlpha*@paramtoAlpha*@paramduration*@return*/privateAnimatorPropertycreatePositionAnimation(intfromY,inttoY,floatfromAlpha,floattoAlpha,intduration){AnimatorPropertyanimatorProperty=newAnimatorProperty();animatorProperty.setCurveType(Animator.CurveType.DECELERATE);animatorProperty.alphaFrom(fromAlpha);animatorProperty.alpha(toAlpha);animatorProperty(fromY.move);animatorProperty.moveToY(toY);animatorProperty.setDuration(duration);returnanimatorProperty;}}End以上主要介绍了PageSlider和PageFlipper的一些简单使用，最后添加了一个设置渐变效果的小函数。不知道怎么设置：先生成一个foreground_gradient.xml//设置颜色填充，可以根据实际需要设置多个//设置渐变方向，共有三个值可以选择：linear_gradient,radial_gradient,sweep_gradient然后为目标组件设置前景色，即：ohos:foreground_element="$graphic:foreground_gradient"更多信息请访问：https://harmonyos.51cto.com
