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.14
import QtQuick.Controls 2.5
import QtQuick.Dialogs 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("imageviewer")
menuBar: MenuBar {
Menu {
id:file
title: qsTr("&File")
MenuItem {
text: qsTr("&Open")
onTriggered: {
fileopendia.open()
}
}
}
Menu {
id:help
title: qsTr("&Help")
MenuItem {
text: qsTr("&About")
onClicked: {
aboutdia.open()
}
}
}
}
header: ToolBar {
Flow {
anchors.fill: parent
ToolButton {
text: qsTr("Open")
onClicked: {
fileopendia.open()
}
}
}
}
background: Rectangle {
color: "darkGray"
}
Image {
id: img
anchors.fill: parent
fillMode: Image.PreserveAspectFit
asynchronous: true
}
FileDialog {
id:fileopendia
title: qsTr("select a image")
nameFilters: [
"image files (*png *.jpg *.jpeg)"
]
onAccepted: {
img.source=fileopendia.fileUrl
}
}
Dialog {
id:aboutdia
title: qsTr("about")
Label {
anchors.fill: parent
text: qsTr("qml image viewer")
horizontalAlignment: Text.AlignHCenter
}
}
}
效果如下
import QtQuick 2.14
import 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:file
title: qsTr("&File")
MenuItem {
text: qsTr("&Open")
onTriggered: {
fileopendia.open()
}
}
}
Menu {
id:help
title: qsTr("&Help")
MenuItem {
text: qsTr("&About")
onClicked: {
aboutdia.open()
}
}
}
}
menuBar负责属性持有MenuBar。每一个菜单栏点开后有一个菜单项,点击菜单栏时,就会发出一个actionTriggered信号,onTriggered负责相应该信号,收到信号后,打开选择文件对话框(调用FileDialog中的open方法)。title属性负责菜单栏的名称显示
header: ToolBar {
Flow {
anchors.fill: parent
ToolButton {
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是一个定位器,见博客https://blog.csdn.net/Master_Cui/article/details/109433473
ToolButton类似于Button,但可以更适合ToolBar的外观,也是QtQuick.Controls中的控件。
Image中的asynchronous是个bool,该属性指定图片在分线程中异步加载本地图像。 默认值为false,设为false时,会导致加载图像时用户界面线程阻塞。将asynchronous设置为true,可以使界面的响应速度更好。此属性仅对从本地图像有效。 通过网络加载的图片始终异步加载。
FileDialog {
id:fileopendia
title: qsTr("select a image")
nameFilters: [
"image files (*png *.jpg *.jpeg)"
]
onAccepted: {
img.source=fileopendia.fileUrl
}
}
title指定对话框的名称
nameFilters是一个文件过滤器,类型是字符串数组
onAccepted类似于槽函数,当文件选择完成是调用,此时指定图片的source为fileopendia.fileUrl
Dialog {
id:aboutdia
title: qsTr("about")
Label {
anchors.fill: parent
text: qsTr("qml image viewer")
horizontalAlignment: Text.AlignHCenter
}
}
dialog就是个普通的对话框组件,Label也是类似于Text的组件,可以设置字体大小,类型和字体颜色等
参考
《qml book》
欢迎大家评论交流,作者水平有限,如有错误,欢迎指出