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
      }

      }

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

需要商务合作(定制程序)的欢迎私信!!

相关推荐
梦起丶3 天前
「 DelegateUI 」Ant-d 风格的 Qt Qml UI 套件
qt·ui·qml·ant-d·ui-kit
小灰灰搞电子1 个月前
QML 快捷键与Shortcut的使用
qt·qml
小灰灰搞电子1 个月前
QML使用ChartView绘制折线图
qt·qml
Ricardo于2 个月前
★3.3 事件处理
qml
梦起丶2 个月前
Qml 中实现时间轴组件
qt·ui·时间轴·控件·qml
梦起丶2 个月前
Qml 中实现任意角为圆角的矩形
qt·ui·控件·qml
码农客栈2 个月前
qml XmlListModel详解
qml
小灰灰搞电子2 个月前
QML states和transitions的使用
qt·qml
码农客栈2 个月前
qml SpringAnimation详解
qml