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
      }

      }

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

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

相关推荐
钱彬 (Qian Bin)2 天前
《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——8. AI赋能(下):在Qt中部署YOLOv8模型
人工智能·qt·yolo·qml·qt quick·工业质检·螺丝瑕疵检测
Little-Hu4 天前
QML 3D曲面图(Surface3D)技术
3d·qml
Little-Hu5 天前
QML视图组件:ListView、GridView、TableView、PathView
数据库·microsoft·qml
钱彬 (Qian Bin)7 天前
《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——6. 传统算法实战:用OpenCV测量螺丝尺寸
教程·cmake·qml·qt quick·工业软件·工业瑕疵检测·qt6.9.1
钱彬 (Qian Bin)8 天前
《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——4. 前后端联动:打通QML与C++的任督二脉
c++·qt·教程·qml·qt quick·qt 6.9.1·工业瑕疵检测
钱彬 (Qian Bin)11 天前
《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——0. 博客系列大纲
人工智能·qt·qml·瑕疵检测·qt quick·yolo8·工业质检
丁劲犇14 天前
Qt Graphs 模块拟取代 charts 和 data visualization还有很长的路要走
c++·qt·qml·visualization·charts·graphs
cpp_learners17 天前
QML与C++相互调用函数并获得返回值
c++·qt·qml
Little-Hu24 天前
QML事件处理:鼠标、拖拽与键盘事件
qml
cpp_learners1 个月前
QML与C++交互之创建自定义对象
c++·qt·qml