标签：qt开发 ​qt quick controls

    QT开发（五十五）———Qt Quick Controls

一、Qt Quick Controls基础

    QT5.1发布了Qt Quick的一个全新模块：Qt Quick Controls。Qt Quick Controls模块提供了大量类似Qt Widgets模块的可重用组件。

    为了开发基于Qt Quick Controls的程序，需要创建一个Qt Quick Application类型的应用程序，选择组件集的时候注意选择Qt Quick Controls。

二、Qt Quick Controls组件

    Qt Quick Controls 提供了多种组件。

1、应用程序窗口

    应用程序窗口是用于描述应用程序的基本窗口属性的组件。

2、导航与视图

    便于用户在一个布局中管理和显示其它组件

3、控件

    控件用于控件用于表现或接受用户输入

4、菜单

    用于构建菜单的组件

三、Qt Quick Controls应用程序实例

Main.qml文件：

import QtQuick 2.6
import QtQuick.Controls 1.4
 
ApplicationWindow
{
    title: qsTr("NotePad")
    width: 640
    height: 480
    Action
    {
        id: exitAction
        text: qsTr("E&xit")
        onTriggered: Qt.quit()
    }
    Action
    {
        id: newAction
        text: qsTr("New")
        iconSource: "images/new.png"
        onTriggered:
        {
            textArea.text = "";
        }
    }
    Action
    {
        id: cutAction
        text: qsTr("Cut")
        iconSource: "images/cut.png"
        onTriggered: textArea.cut()
    }
    Action
    {
        id: copyAction
        text: qsTr("Copy")
        iconSource: "images/copy.png"
        onTriggered: textArea.copy()
    }
    Action
    {
        id: pasteAction
        text: qsTr("Paste")
        iconSource: "images/paste.png"
        onTriggered: textArea.paste()
    }
    Action
    {
        id: selectAllAction
        text: qsTr("Select All")
        onTriggered: textArea.selectAll()
    }
    menuBar: MenuBar
    {
        Menu
        {
            title: qsTr("&File")
            MenuItem { action: newAction }
            MenuItem { action: exitAction }
        }
        Menu
        {
            title: qsTr("&Edit")
            MenuItem { action: cutAction }
            MenuItem { action: copyAction }
            MenuItem { action: pasteAction }
            MenuSeparator {}
            MenuItem { action: selectAllAction }
        }
    }
    toolBar: ToolBar
    {
        Row
        {
            anchors.fill: parent
            ToolButton { action: newAction }
            ToolButton { action: cutAction }
            ToolButton { action: copyAction }
            ToolButton { action: pasteAction }
        }
    }
    TextArea
    {
        id: textArea
        anchors.fill: parent
    }
}

    ApplicationWindow是应用程序的主窗口，提供了很多预定义的功能，比如菜单、工具栏等。qsTr()函数类似于tr()函数，用于国际化。

    menuBar和toolBar两个属性都是ApplicationWindow提供的属性。menuBar是MenuBar类型的。MenuBar具有层次结构，是通过Menu的嵌套实现的。每一个菜单项都是用MenuItem实现的；菜单项之间的分隔符则使用MenuSeparator控件。

    toolBar是Item类型的，通常都会使用ToolBar控件。ToolBar默认没有提供布局，必须给它设置一个布局。直接添加了一个Row，作为横向工具栏的布局。工具栏要横向充满父窗口，设置锚点为anchors.fill: parent。虽然ToolBar设置的是充满整个父窗口，但如果ToolBar只有一个子元素（比如这里的Row），那么工具栏的高度将被设置为子元素的implicitHeight属性，这对结合布局使用非常有用。

    每一个MenuItem和ToolButton都添加了一个action属性。

    使用iconSource属性可以指定图标。图标只能是位于文件系统中的，不能加载资源文件中的图标（如果将整个QML文档放在资源文件中，就可以直接加载资源文件中的图标）。当直接使用“images/new.png”路径时，注意QML是运行时解释的，这个路径是相对于QML文件的路径。图标需要放在与main.qml文件同目录下的images目录中。

    onTriggered属性是一种信号处理函数，后面可以添加JavaScript 语句。如果是多条语句，可以使用大括号，例如newAction的onTriggered。QML组件可以发出信号，与C++不同的是，QML组件的信号并不需要特别的连接语句，而是使用“on信号名字”的形式。Action有一个名为triggered的信号，则其信号处理函数即为onTriggered。这种简单的信号槽实现的局限在于同一个信号只能有一个固定名字的信号处理函数。当然，也可以使用 connect 连接语句。

本文出自 “生命不息，奋斗不止” 博客，谢绝转载！

QT开发（五十五）———Qt Quick Controls

标签：qt开发 ​qt quick controls

原文地址：http://9291927.blog.51cto.com/9281927/1883711