QML学习-swipeView 滑动切换窗口

这篇博客展示了如何在QtQuick环境中使用SwipeView组件创建滑动视图,并通过自定义Button实现不同颜色页面的切换。SwipeView包含红色、蓝色和绿色的矩形页面,而Button组件使用了独立的样式文件以解决版本不匹配问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

swipview 滑动的视图

首先,主QML: 

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQml.Models 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.3

Window {
    visible: true
    width: 1000
    height: 1000
    title: qsTr("Hello World")

    SwipeView{
        id:sw1
        x:0
        y:0

        width: parent.width
        height: 600
        Rectangle{
            width: sw1.width
            height: sw1.height
            color: "red"

        }
        Rectangle{
            width: sw1.width
            height: sw1.height
            color: "blue"

        }
        Rectangle{
            width: sw1.width
            height: sw1.height
            color: "green"

        }

    }

    Mybutton{
        x:0
        y:600
        width: 200
        height: 100
        text:"DD"
        onClicked: {
            sw1.currentIndex = 0;
        }
    }

    Mybutton{
        x:250
        y:600
        width: 200
        height: 100
        text:"FF"
        onClicked: {
            sw1.currentIndex = 1;
        }
    }
}

功能是两个按钮,按动按钮来切换两个纯色页面。滑动切换,动画效果比较丝滑。

button的QML: 

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Button{
style:ButtonStyle{
    id:bs1
    background: Rectangle{
        implicitWidth: 100
        implicitHeight: 100
        color: "blue"
    }

    Label{
        color:"yellow"
        font.bold: true
        text:control.text
    }

}
}

使用了buttonStyle,为什么要单独使用一个文件呢?因为buttonstyle是controls.style 1.4的,而swipeview是2.0的,版本不匹配。只能单独启一个文件。

### QML SwipeView 实现滑动效果 #### 创建基本的SwipeView结构 为了创建一个能够左右滑动切换页面的效果,首先需要定义`SwipeView`的基础属性。这包括设置宽度、高度以及指定初始显示的索引。 ```qml import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 640 height: 480 SwipeView { id: swipeView anchors.fill: parent currentIndex: 0 // 设置当前显示第几个页面,默认为第一个 } } ``` #### 添加页面内容到SwipeView 接下来,在`SwipeView`内部添加多个页面作为其子项。每个页面通常由`Item`, `Rectangle`, 或者其他更复杂的布局构成。这里展示了一个简单的例子,其中包含了三个不同颜色矩形代表的不同页面[^3]。 ```qml // 继续上面的例子... SwipeView { // ... Item { /* 页面1 */ Rectangle { color: "lightblue" width: parent.width; height: parent.height Text { text: qsTr("Page One") anchors.centerIn: parent font.pointSize: 24 } } } Item { /* 页面2 */ Rectangle { color: "lightgreen" width: parent.width; height: parent.height Text { text: qsTr("Page Two") anchors.centerIn: parent font.pointSize: 24 } } } Item { /* 页面3 */ Rectangle { color: "salmon" width: parent.width; height: parent.height Text { text: qsTr("Page Three") anchors.centerIn: parent font.pointSize: 24 } } } } ``` #### 配合PageIndicator使用增强用户体验 为了让用户知道现在处于哪一个页面,并提供更好的交互体验,可以在界面上加入`PageIndicator`控件来指示当前所在位置和总共有多少个可选页面[^2]。 ```qml // 完整示例... PageIndicator { id: indicator count: swipeView.count currentIndex: swipeView.currentIndex anchors.bottom: swipeView.bottom anchors.horizontalCenter: swipeView.horizontalCenter } ``` 通过上述配置即可完成一个基础版本的支持手势滑动切换页面的功能模块。如果想要进一步优化性能或是处理特殊情况下的逻辑,则可能还需要考虑更多细节上的调整与扩展。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值