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
    }
}

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

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