qml Page详解 - 技术栈

1、概述

QML（Qt Modeling Language）中的Page控件是用于在SwipeView或类似容器中承载内容的独立页面。Page控件通常包含一组UI元素，如文本、图像、按钮等，这些元素共同构成了应用程序中的一个逻辑页面。通过SwipeView或其他页面容器，用户可以在不同的Page之间轻松切换。

2、重要属性

footer :
- 类型：Item 或 QML 组件
- 描述：页脚区域，可以包含按钮、文本等任何QML项或组件。
header :
- 类型：Item 或 QML 组件
- 描述：页眉区域，通常包含页面的标题、导航按钮或其他重要信息。
implicitFooterHeight :
- 类型：real（浮点数）
- 描述：页脚的隐式高度，即在没有显式设置大小的情况下页脚应该占据的高度。
implicitFooterWidth :
- 类型：real（浮点数）
- 描述：页脚的隐式宽度，即在没有显式设置大小的情况下页脚应该占据的宽度。
implicitHeaderHeight :
- 类型：real（浮点数）
- 描述：页眉的隐式高度，即在没有显式设置大小的情况下页眉应该占据的高度。
implicitHeaderWidth :
- 类型：real（浮点数）
- 描述：页眉的隐式宽度，即在没有显式设置大小的情况下页眉应该占据的宽度。通常，这可能会设置为与父容器相同的宽度。

title :

类型：string（字符串）

描述：页面的标题，通常显示在页眉中。这个属性可以通过绑定或其他机制传递到页眉中的文本元素上。

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

SwipeView {
    id: swipeView
    anchors.fill: parent
    currentIndex: 0

    Page {
        title: qsTr("First Page")

        ColumnLayout {
            anchors.fill: parent

            Text {
                text: qsTr("Welcome to the first page!")
                Layout.alignment: Qt.AlignCenter
            }

            Button {
                text: qsTr("Go to Second Page")
                Layout.alignment: Qt.AlignCenter
                onClicked: swipeView.currentIndex = 1
            }
        }
    }

    Page {
        title: qsTr("Second Page")

        RowLayout {
            anchors.fill: parent

            Text {
                text: qsTr("You are now on the second page.")
                Layout.alignment: Qt.AlignCenter
            }

            Button {
                text: qsTr("Go Back")
                Layout.alignment: Qt.AlignCenter
                onClicked: swipeView.currentIndex = 0
            }
        }
    }
}

// 假设有一个标题栏或状态栏来显示当前页面的标题
// 这里我们简单地使用Text元素来模拟这个行为
Text {
    id: pageTitle
    text: swipeView.currentItem ? swipeView.currentItem.title : ""
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    font.pointSize: 24
}

}

觉得有帮助的话，打赏一下呗。。

需要商务合作（定制程序）的欢迎私信！！