QML学习-swipeView 滑动切换窗口

最新推荐文章于 2025-04-24 13:21:08 发布

原创最新推荐文章于 2025-04-24 13:21:08 发布 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#qt

QT QML 专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何在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的，版本不匹配。只能单独启一个文件。