多屏幕展示<MultiScreens>-适配功能-基础功能-HarmonyOS 4.X及以下版本主题引擎规范-主题引擎-开发教程-主题中心

功能概述

支持三屏幕内容切换，三屏划动切换控制动画。屏幕绘制可以通过Rectangle矩形图形和Image图片标签来实现。

应用场景

用于滑动屏幕切换多壁纸锁屏。
可用于游戏前面的介绍内容，每一屏展示一个说明步骤。
可实现漫画壁纸，每个屏幕一个页面。

XML规范

收起
自动换行
深色代码主题
复制
<Group x="">
  <!-- 第1屏-->
  <Group x="">
    <Rectangle x="" y="" w="" h="" fillColor="" />
    <!--<Image y="" alignV="" src="" />-->
  </Group>
  <!-- 第2屏-->
  <Group x="">
    <Rectangle x="" y="" w="" h="" fillColor="" />
    <!--<Image y="" alignV="" src="" />-->
  </Group>
  <!-- 第3屏-->
  <Group x="">
    <Rectangle x="" y="" w="" h="" fillColor="" />
    <!--<Image y="" alignV="" src="" />-->
  </Group>
</Group>

参数说明

展开

参数	类型	选项	注释
Group	表达式	必填	元素组集合，当中的x属性为屏幕开始的x坐标位置
Rectangle	表达式	选填	矩形类型，可以用来绘制屏幕内容，相关的参数说明可以参照1.14几何图形
Image	表达式	选填	图片类型，可以用来绘制屏幕内容，相关的参数说明可以参照1.2图片

应用示例

示例一：演示用Rectangle矩形类型来绘制屏幕，fillColor填充颜色来区别三个不同的屏幕，dottedLine和cornerRadius可以指定虚线模式和矩形的圆角半径，具体的可以参照几何图形的参数说明。通过左右滑动可以实现三屏幕的切换的效果。

收起
自动换行
深色代码主题
复制
<!-- 三屏划动切换控制动画 -->
<Var name="move_go">
    <VariableAnimation initPause="true" loop="false">
        <AniFrame value="#move1" time="0" varSpeedFlag="QuartFun_Out" />
        <AniFrame value="#move2" time="200" />
    </VariableAnimation>
</Var>
<Var name="base" expression="0"/>
<Var name="move" expression="#touch_x-#touch_begin_x"/>
<Var name="temp" expression="#base+#move"/>
<Var name="maxvalue" expression="500*#screen_width/1080"/>
<Var name="value" expression="ifelse(lt(#temp,-#maxvalue),-#maxvalue,gt(#temp,#maxvalue),#maxvalue,#temp)"/>
<Var name="scalevalue" expression="#value/#maxvalue"/>
<ExternalCommands>
    <Trigger action="resume">
        <Command target="a.visibility" value="true"/>
    </Trigger>
    <Trigger action="pause">
        <Command target="a.visibility" value="false"/> 
    </Trigger>
</ExternalCommands>
<!-- 此按钮用来判断是向左还是向右滑动 -->
<Button x="0" y="120" w="1080" h="#screen_height">
    <Trigger action="down">
        <VariableCommand name="move1" expression="#move2+#touch_x-#touch_begin_x" />
        <VariableCommand name="move2" expression="max(min(#move2+#zf_end*1080,1080),-1080)" />
        <Command target="move_go.animation" value="play" />
    </Trigger>
    <Trigger action="up">
        <VariableCommand name="base" expression="#value"/>
        <VariableCommand name="move" expression="0"/>
    </Trigger>
</Button>
<Group name="a" x="#scalevalue*ifelse(lt(#scalevalue,0),1080,1080)" >
    <!-- 第1屏-->
    <Group x="-1080" >
        <Rectangle x="0" y="0" w="1080" h="1920" fillColor="#b6937c" dottedLine="20,10,10,20" cornerRadius="55,55"/>
    </Group>
    <!-- 第2屏-->
    <Group x="0" >
        <Rectangle x="0" y="0" w="1080" h="1920" fillColor="#ae6b5a" dottedLine="20,10,10,20" cornerRadius="55,55"/>
    </Group>
    <!-- 第3屏-->
    <Group x="1080" >
        <Rectangle x="0" y="0" w="1080" h="1920" fillColor="#59493f" dottedLine="20,10,10,20" cornerRadius="55,55"/>
    </Group>
</Group>

示例二：演示用三个不同的Image来做屏幕，通过左右滑动实现三屏幕切换的效果。

收起
自动换行
深色代码主题
复制
<!-- 三屏划动切换控制动画 -->
<Var name="move_go">
    <VariableAnimation initPause="true" loop="false">
        <AniFrame value="#move1" time="0" varSpeedFlag="QuartFun_Out" />
        <AniFrame value="#move2" time="200" />
    </VariableAnimation>
</Var>
<Var name="base" expression="0"/>
<Var name="move" expression="#touch_x-#touch_begin_x"/>
<Var name="temp" expression="#base+#move"/>
<Var name="maxvalue" expression="500*#screen_width/1080"/>
<Var name="value" expression="ifelse(lt(#temp,-#maxvalue),-#maxvalue,gt(#temp,#maxvalue),#maxvalue,#temp)"/>
<Var name="scalevalue" expression="#value/#maxvalue"/>
<ExternalCommands>
    <Trigger action="resume">
        <Command target="a.visibility" value="true"/>
    </Trigger>
    <Trigger action="pause">
        <Command target="a.visibility" value="false"/> 
    </Trigger>
</ExternalCommands>
<!-- 此按钮用来判断是向左还是向右滑动 -->
<Button x="0" y="120" w="1080" h="#screen_height">
    <Trigger action="down">
        <VariableCommand name="move1" expression="#move2+#touch_x-#touch_begin_x" />
        <VariableCommand name="move2" expression="max(min(#move2+#zf_end*1080,1080),-1080)" />
        <Command target="move_go.animation" value="play" />
    </Trigger>
    <Trigger action="up">
        <VariableCommand name="base" expression="#value"/>
        <VariableCommand name="move" expression="0"/>
    </Trigger>
</Button>
<Group name="a" x="#scalevalue*ifelse(lt(#scalevalue,0),1080,1080)" >
    <!-- 第1屏-->
    <Group x="-1080">
        <Image y="#screen_height" alignV="bottom" src="screen1.png" /> 
    </Group>
    <!-- 第2屏-->
    <Group x="0">
        <Image y="#screen_height" alignV="bottom" src="screen2.jpg"/>
    </Group>
    <!-- 第3屏-->
    <Group x="1080">
        <Image y="#screen_height" alignV="bottom" src="screen3.jpg"/>
    </Group>
</Group>