QML_滑动导航模型SwipeView

最新推荐文章于 2024-01-05 18:57:54 发布

HX科技

最新推荐文章于 2024-01-05 18:57:54 发布

阅读量1.2k

点赞数

分类专栏： Qt开发文章标签： qt 开发语言

本文链接：https://blog.csdn.net/weixin_50183638/article/details/125236777

版权

Qt开发专栏收录该内容

51 篇文章 6 订阅

订阅专栏

QML_滑动导航模型SwipeView

SwipeView
属性:
horizontal : 保存滑动视图是否为水平
interactive : 描述用户是否可以与SwipeView进行交互，设置为true则用户无法滑动
orientation : 保留方向
vertical : 保存滑动视图是否垂直
附加属性:
index : 保存SwipeView中每个子项的索引
isCurrentItem : 若子项为当前项，则此属性为true
isNextItem : 若子项是下一个项目，则此属性为true
isPreviousItem : 若子项是上一个项目，则此属性为true
view : 包含管理此子项的视图

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ColorDialog")

    SwipeView {
        id: view
        currentIndex: 1  //设置默认在的页数
        anchors.fill: parent
        orientation: Qt.Vertical  //设置滑动切换的方向
        interactive: true  //是否允许让滑动

        Rectangle {
            id: firstPage
            color: "purple"
            Text {
                text: qsTr("First")
                anchors.centerIn: parent
                font.pixelSize: 25
            }
        }
        Rectangle {
            id: secondPage
            color: "blue"
            Text {
                text: qsTr("Second")
                anchors.centerIn: parent
                font.pixelSize: 25
            }
        }
        Rectangle {
            id: thirdPage
            color: "green"
            Text {
                text: qsTr("Third")
                anchors.centerIn: parent
                font.pixelSize: 25
            }
        }
    }
}

在这里插入图片描述

建议大家在填充SwipeView的时候选择的是Page组件，Page是一个容器控件，可以方便地将页眉和页脚项添加到页面。它的三个重要属性footer、header、title分别对应着页脚、页眉和标题栏。因为我们的SwipeView本身是不可见的，需要为其设置指示才可以知道当前是第几页。通过page的属性我们可以设置指示栏

SwipeView {
    id: view
    currentIndex: 0
    anchors.fill: parent
    orientation: Qt.Vertical
    interactive: true

    Page {
        header: Rectangle {
            height: 80
            color: "orange"
            Text {
                anchors.centerIn: parent
                text: "one"
                font.pixelSize: 25
            }
        }

        footer: Rectangle {
            height: 30
            color: "orange"
        }
    }

    Page {
        header: Rectangle {
            height: 80
            color: "orange"
            Text {
                anchors.centerIn: parent
                text: "two"
                font.pixelSize: 25
            }
        }

        footer: Rectangle {
            height: 30
            color: "orange"
        }
    }
}

页面指示符PageIndicator

SwipeView {
    id: view
    currentIndex: pageIndicator.currentIndex
    anchors.fill: parent
    orientation: Qt.Horizontal
    interactive: true

    Rectangle {
        id: firstPage
        color: "purple"
        Text {
            text: qsTr("First")
            anchors.centerIn: parent
            font.pixelSize: 25
        }
    }
    Rectangle {
        id: secondPage
        color: "blue"
        Text {
            text: qsTr("Second")
            anchors.centerIn: parent
            font.pixelSize: 25
        }
    }
    Rectangle {
        id: thirdPage
        color: "green"
        Text {
            text: qsTr("Third")
            anchors.centerIn: parent
            font.pixelSize: 25
        }
    }
}

PageIndicator {
    id: pageIndicator
    interactive: true
    count: view.count
    currentIndex: view.currentIndex
    anchors.bottom: parent.bottom
    anchors.horizontalCenter: parent.horizontalCenter
}