Qt 示例学习--3 gallery quick controls

示例介绍

之前看到的示例都比较简单，这次搞一个相对复杂的例子：

具体介绍

1 main.cpp

int main(int argc, char *argv[])
{
QtQuickControlsApplication app(argc, argv);
if (QCoreApplication::arguments().contains(QLatin1String("--coreprofile"))) {
QSurfaceFormat fmt;
fmt.setVersion(4, 4);
fmt.setProfile(QSurfaceFormat::CoreProfile);
QSurfaceFormat::setDefaultFormat(fmt);
}
QQmlApplicationEngine engine(QUrl("qrc:/main.qml"));
return app.exec();
}

这里使用QQmlApplicationEngine，之前示例1中使用的是QQuickView ，可以看到QQuickView中用到了view.engine()即QQmlEngine类型的，是QQmlApplicationEngine的父类。

查看相关帮助：

Unlike QQuickView, QQmlApplicationEngine does not automatically create a root window. If you are using visual items from Qt Quick, you will need to place them inside of a Window.

2 main.qml

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Dialogs 1.1
import QtQuick.Controls 1.2
import "qml/UI.js" as UI
/* UI.js内容
.pragma library
var margin = 2
var tabPosition = Qt.TopEdge
var label = ""
*/

import "qml" // 引入整个目录

ApplicationWindow { // 如QQmlApplicationEngine帮助中说的，这里需要自己定义一个Window
visible: true
title: "Qt Quick Controls Gallery"

width: 640
height: 480

MessageDialog { // 帮助对话框
id: aboutDialog
icon: StandardIcon.Information
title: "About"
text: "Qt Quick Controls Gallery"
informativeText: "This example demonstrates most of the available Qt Quick Controls."
}

Action { // 定义几个Action
id: copyAction
text: "&Copy"
shortcut: StandardKey.Copy
iconName: "edit-copy"
enabled: (!!activeFocusItem && !!activeFocusItem["copy"])
onTriggered: activeFocusItem.copy()
}

Action {
id: cutAction
text: "Cu&t"
shortcut: StandardKey.Cut
iconName: "edit-cut"
enabled: (!!activeFocusItem && !!activeFocusItem["cut"])
onTriggered: activeFocusItem.cut()
}

Action {
id: pasteAction
text: "&Paste"
shortcut: StandardKey.Paste
iconName: "edit-paste"
enabled: (!!activeFocusItem && !!activeFocusItem["paste"])
onTriggered: activeFocusItem.paste()
}

toolBar: ToolBar {
RowLayout { // 这里也可以使用Row,但使用时Item并未按预期撑开，在QML中布局分：Item Positioner和Item Layout，我对这个理解也不充分，附上网上的一个讲解：http://blog.csdn.net/foruok/article/details/33738227
anchors.fill: parent
anchors.margins: spacing
Label {
text: UI.label
}
Item { Layout.fillWidth: true } // fillWidth会使控件尽量使用最大大小
CheckBox {
id: enabler
text: "Enabled"
checked: true
}
}
}

menuBar: MenuBar {
Menu {
title: "&File"
MenuItem {
text: "E&xit"
shortcut: StandardKey.Quit
onTriggered: Qt.quit()
}
}
Menu {
title: "&Edit"
visible: tabView.currentIndex == 2
MenuItem { action: cutAction }
MenuItem { action: copyAction }
MenuItem { action: pasteAction }
}
Menu {
title: "&Help"
MenuItem {
text: "About..."
onTriggered: aboutDialog.open()
}
}
}

TabView {
id: tabView

anchors.fill: parent
anchors.margins: UI.margin
tabPosition: UI.tabPosition

Layout.minimumWidth: 360
Layout.minimumHeight: 360
Layout.preferredWidth: 480
Layout.preferredHeight: 640

Tab {
title: "Buttons"
ButtonPage { // tab展示的内容，ButtonPage 为具体的其他qml文件的文件名
enabled: enabler.checked
}
}
Tab {
title: "Progress"
ProgressPage {
enabled: enabler.checked
}
}
Tab {
title: "Input"
InputPage {
enabled: enabler.checked
}
}
}
}

3 察看qml/ButtonPage.qml

对应界面：



采用多个GroupBox 放在GridLayout 内~

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2

ScrollView {
id: page
implicitWidth: 640
implicitHeight: 200

horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff

Item {
id: content

width: Math.max(page.viewport.width, grid.implicitWidth + 2 * grid.rowSpacing)
height: Math.max(page.viewport.height, grid.implicitHeight + 2 * grid.columnSpacing)

GridLayout {
id: grid

anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: grid.rowSpacing
anchors.rightMargin: grid.rowSpacing
anchors.topMargin: grid.columnSpacing

columns: page.width < page.height ? 1 : 2 // 当宽小于高时采用1排竖排进行排列

GroupBox {
title: "Button"
Layout.fillWidth: true
Layout.columnSpan: grid.columns
RowLayout {
anchors.fill: parent
Button { text: "OK"; isDefault: true }
Button { text: "Cancel" }
Item { Layout.fillWidth: true }
Button {
text: "Attach"
menu: Menu { // button搭配menu，一般没有注意到，之前还用QCombobox模拟过，用这个最简单
MenuItem { text: "Image" }
MenuItem { text: "Document" }
}
}
}
}

GroupBox {
title: "CheckBox"
Layout.fillWidth: true
ColumnLayout {
anchors.fill: parent
CheckBox { text: "E-mail"; checked: true }
CheckBox { text: "Calendar"; checked: true }
CheckBox { text: "Contacts" }
}
}

GroupBox {
title: "RadioButton"
Layout.fillWidth: true
ColumnLayout {
anchors.fill: parent
ExclusiveGroup { id: radioGroup } // 单选框，组~
RadioButton { text: "Portrait"; exclusiveGroup: radioGroup }
RadioButton { text: "Landscape"; exclusiveGroup: radioGroup }
RadioButton { text: "Automatic"; exclusiveGroup: radioGroup; checked: true }
}
}

GroupBox {
title: "Switch"
Layout.fillWidth: true
Layout.columnSpan: grid.columns
ColumnLayout {
anchors.fill: parent
RowLayout {
Label { text: "Wi-Fi"; Layout.fillWidth: true }
Switch { checked: true } // switch控件，c++中还未发现对应控件
}
RowLayout {
Label { text: "Bluetooth"; Layout.fillWidth: true }
Switch { checked: false }
}
}
}
}
}
}

顺带学习到了button搭配menu，具体还是看帮助（之前还自己通过QCombobox实现了一个哈，下次考虑用这个）



Switch 控件

4 察看qml/ProgressPage.qml

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2

ScrollView {
id: page
implicitWidth: 640
implicitHeight: 400

horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff

Item {
id: content

width: Math.max(page.viewport.width, column.implicitWidth + 2 * column.spacing)
height: Math.max(page.viewport.height, column.implicitHeight + 2 * column.spacing)

ColumnLayout {
id: column

anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: column.spacing

GroupBox {
title: "ProgressBar"
Layout.fillWidth: true
ColumnLayout {
anchors.fill: parent
ProgressBar { indeterminate: true; Layout.fillWidth: true }
ProgressBar { value: slider.value; Layout.fillWidth: true }
}
}

GroupBox {
title: "Slider"
Layout.fillWidth: true
ColumnLayout {
anchors.fill: parent
Slider { id: slider; value: 0.5; Layout.fillWidth: true }
}
}

GroupBox {
title: "BusyIndicator"
Layout.fillWidth: true
BusyIndicator { running: true }
}
}
}
}

学习：

1. ProgressBar 控件的indeterminate

2. BusyIndicator

4 关于 qml/InputPage.qml

具体代码不详细说了比较简单，学习点：

1. TextField 的echoMode: TextInput.Password设置回显模式，常用于密码框

2. ComboBox 的editable: true

3. SpinBox 的 decimals