引言
接上篇 QML 滑动与翻转效果（Flickable与Flipable） 。本文通过登录界面（无边框窗口）翻转示例，进一步说明Flipable组件的实际应用方法。
核心组件实现
无边框翻转窗口（FlipableDemo.qml）
import QtQuick
import QtQuick.Controls
Window {
width: 400
height: 400
title: "登录"
// visible: true
color: "transparent"
flags: Qt.FramelessWindowHint //无边框窗口
Flipable {
id: flipable
anchors.fill: parent
property bool flipped: false
front: LoginPage {
width: parent.width
height: parent.height
onSettingsRequested: flipable.flipped = true
}
back: LoginSetting {
width: parent.width
height: parent.height
onBackRequested: flipable.flipped = false
}
transform: Rotation {
id: rotation
origin.x: flipable.width/2
origin.y: flipable.height/2
axis.x: 0; axis.y: 1; axis.z: 0
angle: 0
}
states: State {
name: "back"
when: flipable.flipped
PropertyChanges { target: rotation; angle: 180 }
}
transitions: Transition {
NumberAnimation {
target: rotation
property: "angle"
duration: 500
easing.type: Easing.InOutQuad
}
}
}
}
代码说明：
这段代码定义了一个无边框的窗口，窗口中包含一个可翻转的组件，用于在登录页面和登录设置页面之间进行切换，以下是具体介绍：
窗口设置：
visible: true：此处被注释掉了，默认窗口不可见。color: "transparent"：设置窗口的背景颜色为透明。flags: Qt.FramelessWindowHint：设置窗口的标志为无边框窗口，使窗口没有默认的窗口边框和标题栏。
Flipable 组件：
Flipable：创建一个可翻转的组件，允许在其前后两个面之间进行切换。property bool flipped: false：定义一个bool属性flipped，用于指示当前是否处于翻转状态，初始值为false。
正面页面设置：
front: LoginPage：指定 Flipable 组件的正面为一个名为LoginPage的页面。onSettingsRequested: flipable.flipped = true：当在LoginPage中触发settingsRequested信号时，将flipable的flipped属性设置为true，从而触发页面翻转，显示背面的设置页面。
背面页面设置：
back: LoginSetting：指定 Flipable 组件的背面为一个名为LoginSetting的页面。onBackRequested: flipable.flipped = false：当在LoginSetting中触发backRequested信号时，将flipable的flipped属性设置为false，触发页面翻转，返回正面的登录页面。
旋转变换：
transform: Rotation：为 Flipable 组件添加一个旋转变换。origin.x: flipable.width/2和origin.y: flipable.height/2：设置旋转的中心点为 Flipable 组件的中心位置。axis.x: 0; axis.y: 1; axis.z: 0：设置旋转轴为 Y 轴，即绕垂直轴旋转。angle: 0：初始旋转角度为 0 度。
状态和状态切换：
states: State：定义 Flipable 组件的状态。name: "back"：指定状态的名称为 “back”，表示背面朝上的状态。when: flipable.flipped：当flipable.flipped为true时，触发该状态。PropertyChanges：在该状态下，对rotation对象的angle属性进行修改，设置其值为 180 度，实现页面的翻转。
运行效果：
登录页面和设置页面（省略）
具体代码省略，详情请看GitCode链接：
- 登录页面代码：LoginPage.qml
- 设置页面代码：LoginSetting.qml
主界面集成（Main.qml）
ApplicationWindow {
SwipeView {
id: swipeView
anchors.fill: parent
Item {...... }
Item { ......}
Item {
Column {
spacing: 20
anchors.centerIn: parent
FlipableDemo {
id: loginDialog
visible: false
}
Button {
width: 120
height: 40
text: "弹窗"
onClicked: loginDialog.visible = true
}
}
}
}
PageIndicator {
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
currentIndex: swipeView.currentIndex
count: swipeView.count
}
}
代码说明：
这段代码定义了一个应用窗口，主要包含一个可滑动视图（SwipeView）和一个页面指示器（PageIndicator）。
SwipeView：
- SwipeView 是一个用于创建可滑动视图的组件，允许用户通过滑动在不同的页面（子项）之间切换。
- 在 SwipeView 中包含了多个子项，每个子项都是一个 Item，这里只展示了第三个子项的详细内容，前两个子项用于展示上篇示例：QML 滑动与翻转效果（Flickable与Flipable） 。
- FlipableDemo 是一个自定义的弹窗组件，初始时设置为不可见。
Button 按钮控件：
- 当按钮被点击时，会将 loginDialog 的 visible 属性设置为 true，从而显示弹窗。
PageIndicator组件：
PageIndicator 用于显示当前所在页面的索引以及总共有多少页面，帮助用户了解自己在滑动视图中的位置。其中：
- currentIndex 属性绑定到 swipeView.currentIndex，表示当前显示的页面索引。
- count 属性绑定到 swipeView.count，表示滑动视图中总共有多少页面。
下载链接
下载链接：GitCode -> Flickable & Flipable Demo
