QML编程开发【二】

逆天の诸葛

已于 2022-12-28 23:07:29 修改

阅读量1.2k

点赞数 1

分类专栏： Qt开发笔记文章标签： QML Qt Qt学习笔记

于 2020-01-20 16:02:18 首次发布

Qt开发笔记专栏收录该内容

6 篇文章 3 订阅

订阅专栏

简介

前一节介绍了什么是QML以及如何创建一个简单的QML应用程序，创建步骤和一些创建过程中的注意事项。本节开始介绍用QtQuick 控件创建应用程序。

使用控件创建QML应用程序

Qt Quick提供基本的图形元素，Qt Quick Controls提供了现成的QML类型供应用程序使用。我们先来了解一下Qt Quick Controls提供的各种QML类型，我们可以在应用程序中使用以下导入语句将Qt Quick Controls QML类型可以导入到我们的“xxx.qml”文件中：

import QtQuick.Controls 2.13

QML 类型

AbstractButton——提供按钮通用功能的抽象基类型。

Action——抽象用户界面动作。

ActionGroup——放在一起的一组动作。

ApplicationWindow——支持页眉和页脚的样式化顶级窗口。

BusyIndicator——忙碌指示器，指示后台活动，例如，在加载内容时。

Button——按钮，可以点击执行命令或回答一个问题。

ButtonGroup——相互排斥的一组可选按钮。

CheckBox——检查按钮，可以开关。

CheckDelegate——带有可以打开或关闭检查指示器的项代理。

ComboBox——组合按钮和弹出列表选择选项。

Container——提供容器通用功能的抽象基类型。

Control——提供所有控件通用功能的抽象基类型。

DelayButton——按下足够长时间后触发的检查按钮。

Dial——旋转以设置值的圆形刻度盘。

Dialog——带有标准按钮和标题的弹出对话框，用于与用户进行短期交互。

DialogButtonBox——对话框中使用的按钮框。

Drawer——可以使用一个滑动手势打开和关闭的侧边面板。

Frame——带可视框架的逻辑控件组。

GroupBox——带可视框架和标题的逻辑控件组。

ItemDelegate——可用于各种视图和控件的基本项代理。

Label——带有继承字体的样式化文本标签。

Menu——可以用作上下文菜单或弹出菜单的弹出菜单。

MenuBar——提供一个窗口菜单栏。

MenuBarItem——在菜单栏中显示下拉菜单。

MenuItem——在菜单中的显示项。

MenuSeparator——将菜单中的一组项与相邻的项分开。

Overlay——弹出窗口的覆盖。

Page——具有页眉和页脚支持的样式化页控件。

PageIndicator——页指示器，指示当前活动的页。

Pane——提供与应用程序样式和主题匹配的背景。

Popup——类弹出式用户界面控件的基本类型。

ProgressBar——进度条，指示操作的进度。

RadioButton——唯一的单选按钮，可以开关。

RadioDelegate——互斥项委托，带有一个可以打开或关闭的唯一指示器。

RangeSlider——用于通过沿轨道滑动两个手柄来选择范围内的值。

RoundButton——具有可由用户单击的圆角按钮控件。

ScrollBar——垂直或水平交互式滚动条。

ScrollIndicator——垂直或水平非交互式滚动指示器。

ScrollView——可滚动视图。

Slider——通过沿轨道滑动手柄来选择一个值。

SpinBox——允许用户从一组预置值中进行选择。

SplitHandle——为SplitView句柄提供附加属性。

SplitView——在每个项目之间放置一个可拖动的拆分器。

StackView——提供基于堆栈的导航模型。

SwipeDelegate——可滑动的项委托。

SwipeView——使用户能够通过横向滑动来浏览页面。

Switch——可以开关的按钮。

SwitchDelegate——带有开关指示器的项委托，该开关指示器可被打开或关闭。

TabBar——允许用户在不同的视图或子任务之间切换。

TabButton——一个看起来适合TabBar的按钮。

TextArea——多行文本输入区。

TextField——单行文本输入区。

ToolBar——上下文敏感控件的容器。

ToolButton——一个看起来适合ToolBar的按钮。

ToolSeparator——将工具栏中的一组项与相邻的项分隔开。

ToolTip——为任何控件提供工具提示。

Tumbler——可以选择的可旋转的项目轮。

我们可以插入ApplicationWindow类型作为创建应用程序的起点。一个应用程序UI有这样的基本布局：

在每个区域内，可以添加和连接不同的控件以形成应用程序。例如，下面的代码片段是演示如何使用可用空间的基本应用程序：

  //导入相关模块
  import QtQuick 2.12
  import QtQuick.Controls 2.12

  //包含应用程序的窗口
  ApplicationWindow {

      //程序的标题
      title: qsTr("Hello World")
      width: 640
      height: 480

      //包含菜单中的两个菜单项
      menuBar: MenuBar {
          Menu {
              title: qsTr("File")
              MenuItem {
                  text: qsTr("&Open")
                  onTriggered: console.log("Open action triggered");
              }
              MenuItem {
                  text: qsTr("Exit")
                  onTriggered: Qt.quit();
              }
          }
      }

      //内容区
      //放一个按钮在内容区中心
      Button {
          text: qsTr("Hello World")
          anchors.horizontalCenter: parent.horizontalCenter
          anchors.verticalCenter: parent.verticalCenter
      }
  }

应用程序有两个菜单项，中间有一个按钮。单击Exit菜单项将关闭应用程序。

Qt Quick 布局

Qt快速布局是一组QML类型，用于在用户界面中安排项目。与定位器不同，Qt快速布局还可以调整项目大小。这使得它们非常适合可调整大小的用户界面。由于布局是项，因此它们可以嵌套。通常应用程序和布局是密不可分的，QML中提供了五种布局，导入方式：

import QtQuick.Layouts 1.3

ColumnLayout ——与GridLayout相同，但只有一个列。

GridLayout——提供在网格中动态排列项的方法。

Layout——为压入GridLayout、RowLayout或ColumnLayout的项提供附加属性。

RowLayout——与GridLayout相同，但只有一行。

StackLayout——一次只能显示一项的项的堆栈。

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    title: "Basic layouts"
    property int margin: 11
    width: mainLayout.implicitWidth + 2 * margin
    height: mainLayout.implicitHeight + 2 * margin
    minimumWidth: mainLayout.Layout.minimumWidth + 2 * margin
    minimumHeight: mainLayout.Layout.minimumHeight + 2 * margin

    ColumnLayout {
        id: mainLayout
        anchors.fill: parent
        anchors.margins: margin
        GroupBox {
            id: rowBox
            title: "Row layout"
            Layout.fillWidth: true

            RowLayout {
                id: rowLayout
                anchors.fill: parent
                TextField {
                    placeholderText: "This wants to grow horizontally"
                    Layout.fillWidth: true
                }
                Button {
                    text: "Button"
                }
            }
        }

        GroupBox {
            id: gridBox
            title: "Grid layout"
            Layout.fillWidth: true

            GridLayout {
                id: gridLayout
                rows: 3
                flow: GridLayout.TopToBottom
                anchors.fill: parent

                Label { text: "Line 1" }
                Label { text: "Line 2" }
                Label { text: "Line 3" }

                TextField { }
                TextField { }
                TextField { }

                TextArea {
                    text: "This widget spans over three rows in the GridLayout.\n"
                        + "All items in the GridLayout are implicitly positioned from top to bottom."
                    Layout.rowSpan: 3
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
            }
        }
        TextArea {
            id: t3
            text: "This fills the whole cell"
            Layout.minimumHeight: 30
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        GroupBox {
            id: stackBox
            title: "Stack layout"
            implicitWidth: 200
            implicitHeight: 60
            Layout.fillWidth: true
            Layout.fillHeight: true
            StackLayout {
                id: stackLayout
                anchors.fill: parent

                function advance() { currentIndex = (currentIndex + 1) % count }

                Repeater {
                    id: stackRepeater
                    model: 5
                    Rectangle {
                        color: Qt.hsla((0.5 + index)/stackRepeater.count, 0.3, 0.7, 1)
                        Button { anchors.centerIn: parent; text: "Page " + (index + 1); onClicked: { stackLayout.advance() } }
                    }
                }
            }
        }
    }
}

上面示例展示了如何使用GridLayout、RowLayout和ColumnLayout轻松地将UI组件安排到布局中。运行结果如下：