当前位置：首页 > ds >正文

QML 无边框窗口翻转动画

ds 2025/8/22 18:15:45

引言

接上篇 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 按钮控件：