引言

接上篇 QML 滑动与翻转效果（Flickable与Flipable） 。本文通过登录界面（无边框窗口）翻转示例，进一步说明Flipable组件的实际应用方法。

---

核心组件实现

无边框翻转窗口（FlipableDemo.qml）

import QtQuick
import QtQuick.ControlsWindow {width: 400height: 400title: "登录"// visible: truecolor: "transparent"flags: Qt.FramelessWindowHint //无边框窗口Flipable {id: flipableanchors.fill: parentproperty bool flipped: falsefront: LoginPage {width: parent.widthheight: parent.heightonSettingsRequested: flipable.flipped = true}back: LoginSetting {width: parent.widthheight: parent.heightonBackRequested: flipable.flipped = false}transform: Rotation {id: rotationorigin.x: flipable.width/2origin.y: flipable.height/2axis.x: 0; axis.y: 1; axis.z: 0angle: 0}states: State {name: "back"when: flipable.flippedPropertyChanges { target: rotation; angle: 180 }}transitions: Transition {NumberAnimation {target: rotationproperty: "angle"duration: 500easing.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: swipeViewanchors.fill: parentItem {...... }Item { ......}Item {Column {spacing: 20anchors.centerIn: parentFlipableDemo {id: loginDialogvisible: false}Button {width: 120height: 40text: "弹窗"onClicked: loginDialog.visible = true}}}}PageIndicator {anchors.bottom: swipeView.bottomanchors.horizontalCenter: parent.horizontalCentercurrentIndex: swipeView.currentIndexcount: 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