Qt Quick Controls 2提供了一组UI控件，例如按钮，标签，复选框，滑块等（用之查之即可）。用于在Qt Quick中创建用户界面。UI控件很多，这里通过一个图片浏览器的实现来逐步讲解
图片浏览器示例
1、创建一个qtquick工程
然后给工程命名，一直点下一步即可
创建出来的工程结构是这样的
在main.cpp中有一个主函数，用来加载qml文件
#include <QGuiApplication>#include <QQmlApplicationEngine>int main(int argc, char *argv[]){QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QGuiApplication app(argc, argv);QQmlApplicationEngine engine;const QUrl url(QStringLiteral("qrc:/main.qml"));QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,&app, [url](QObject *obj, const QUrl &objUrl) {if (!obj && url == objUrl)QCoreApplication::exit(-1);}, Qt::QueuedConnection);engine.load(url);return app.exec();}
上面的代码就是创建一个QQmlApplicationEngine对象，然后加载"qrc:/main.qml"，之后进入时间循环，程序开始运行
main.qml的实现如下
import QtQuick 2.14import QtQuick.Controls 2.5import QtQuick.Dialogs 1.2ApplicationWindow {visible: truewidth: 640height: 480title: qsTr("imageviewer")menuBar: MenuBar {Menu {id:filetitle: qsTr("&File")MenuItem {text: qsTr("&Open")onTriggered: {fileopendia.open()}}}Menu {id:helptitle: qsTr("&Help")MenuItem {text: qsTr("&About")onClicked: {aboutdia.open()}}}}header: ToolBar {Flow {anchors.fill: parentToolButton {text: qsTr("Open")onClicked: {fileopendia.open()}}}}background: Rectangle {color: "darkGray"}Image {id: imganchors.fill: parentfillMode: Image.PreserveAspectFitasynchronous: true}FileDialog {id:fileopendiatitle: qsTr("select a image")nameFilters: ["image files (*png *.jpg *.jpeg)"]onAccepted: {img.source=fileopendia.fileUrl}}Dialog {id:aboutdiatitle: qsTr("about")Label {anchors.fill: parenttext: qsTr("qml image viewer")horizontalAlignment: Text.AlignHCenter}}}
效果如下
import QtQuick 2.14import QtQuick.Controls 2.5 //导入QtQuick.Controls 2.5，提供基本控件import QtQuick.Dialogs 1.2//提供用于显示消息，选择文件，选择颜色和选择字体的标准对话框，以及自定义对话框。
代码中使用的的FileDialog控件就需要导入QtQuick.Dialogs
ApplicationWindow是一种更加方便的窗口控件继承于Window，使用前，需要导入QtQuick.Controls。之所以说ApplicationWindow方便，是因为ApplicationWindow自带四个区域（如下图）：菜单栏，工具栏、内容区域和状态栏。菜单栏，工具栏和状态栏通常由MenuBar，ToolBar或TabBar控件的实例填充，而内容区域是窗口的子项所在的位置。 图像查看器无状态栏
上述代码中，菜单栏是由两个菜单组成
menuBar: MenuBar {Menu {id:filetitle: qsTr("&File")MenuItem {text: qsTr("&Open")onTriggered: {fileopendia.open()}}}Menu {id:helptitle: qsTr("&Help")MenuItem {text: qsTr("&About")onClicked: {aboutdia.open()}}}}
menuBar负责属性持有MenuBar。每一个菜单栏点开后有一个菜单项，点击菜单栏时，就会发出一个actionTriggered信号，onTriggered负责相应该信号，收到信号后，打开选择文件对话框（调用FileDialog中的open方法）。title属性负责菜单栏的名称显示
header: ToolBar {Flow {anchors.fill: parentToolButton {text: qsTr("Open")onClicked: {fileopendia.open()}}}}
header属性持有窗口的header（页眉）。 如果将ApplicationWindow的header设置为ToolBar，TabBar或DialogButtonBox，那么将header将被自动置为ToolBar::position，TabBar::position或DialogButtonBox::position属性。
上述的position有两个值，分别是对应的Header和Footer，position的默认值是Footer，意思是对应的ToolBar，TabBar或DialogButtonBox在窗口的底部
Flow是一个定位器，见博客/Master_Cui/article/details/109433473
ToolButton类似于Button，但可以更适合ToolBar的外观，也是QtQuick.Controls中的控件。
Image中的asynchronous是个bool，该属性指定图片在分线程中异步加载本地图像。 默认值为false，设为false时，会导致加载图像时用户界面线程阻塞。将asynchronous设置为true，可以使界面的响应速度更好。此属性仅对从本地图像有效。 通过网络加载的图片始终异步加载。
FileDialog {id:fileopendiatitle: qsTr("select a image")nameFilters: ["image files (*png *.jpg *.jpeg)"]onAccepted: {img.source=fileopendia.fileUrl}}
title指定对话框的名称
nameFilters是一个文件过滤器，类型是字符串数组
onAccepted类似于槽函数，当文件选择完成是调用，此时指定图片的source为fileopendia.fileUrl
Dialog {id:aboutdiatitle: qsTr("about")Label {anchors.fill: parenttext: qsTr("qml image viewer")horizontalAlignment: Text.AlignHCenter}}
dialog就是个普通的对话框组件，Label也是类似于Text的组件，可以设置字体大小，类型和字体颜色等
参考
《qml book》
欢迎大家评论交流，作者水平有限，如有错误，欢迎指出
