目录
- 文章简介
- 1. 创建qml工程
- 2. 创建一个类和qml文件，修改main函数
- 3. 函数说明：
- 4. qml 文件间的调用
- 5. 界面布局
- 6. 代码举例
文章简介
初学qml用来记录qml的学习过程，方便后面归纳总结整理。
1. 创建qml工程
如下图，我使用的是一个空的qml的工程，这样更容易上手。
2. 创建一个类和qml文件，修改main函数
.h文件
#ifndef MYCPPOBJECT_H
#define MYCPPOBJECT_H
#include <QObject>
class MyCppObject : public QObject
{
Q_OBJECT
public:
MyCppObject(QObject *parent = nullptr);
signals:
void sigButtonClick();
public slots:
void handleButtonClick();
};
#endif // MYCPPOBJECT_H
cpp文件
#include "mycppobject.h"
#include <QDebug>
MyCppObject::MyCppObject(QObject *parent) : QObject(parent) {}
void MyCppObject::handleButtonClick()
{
qDebug() << "click";
// 处理按键点击事件
// ...
// 发出自定义信号
emit sigButtonClick();
}
main函数
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
//注册自定义类
qmlRegisterType<MyCppObject>("GenOsal", 0, 1, "MyCppObject");
// 加载QML文件
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/ButtonExample.qml")));
// 在QML中注册自定义的C++类型
if (engine.rootObjects().isEmpty())
{
return -1;
}
// 创建C++对象
// MyCppObject myCppObject;
// 将C++对象注册到QML引擎中
// engine.rootContext()->setContextProperty("myCppObject", &myCppObject);
return app.exec();
}
qml文件
// 写一个串口通信
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.0
// 自定义的cpp（通过main.c注册进来）
import GenOsal 0.1
Window {
width: 640
height: 480
visible: true
title: qsTr("test Connect")
// 用来连接cpp的信号
Connections{
target: m_object
function onSigButtonClick(){
console.log("recv button clicked");
}
}
// 变量定义：var定义局部变量，只在当前QML文件中可用
// property 定义对象属性的变量
// let 定义常量，定义后不可以修改值
Label{
id: lab_com
x: 0
y: 0
width: 120
height: 50
text: "端口号"
color: "black"
font.pixelSize: 18
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
background: Rectangle {
implicitWidth: 100
implicitHeight: 40
color: "red"
border.color: "#26282a"
border.width: 1
radius: 4
gradient: Gradient{
GradientStop { position: 0.0; color: mouseArea.pressed ? "white" : "lightgray"}
GradientStop { position: 1.0; color: mouseArea.pressed ? "lightgray" : "gray"}
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
onReleased: {
// 直接调用函数
m_object.handleButtonClick();
}
onPressed: {
}
onClicked: {
console.log(edit_com.text);
}
}
}
Rectangle {
// 设置部件的边距
anchors.margins: {
left:20
}
anchors.left: lab_com.right
y: lab_com.y
width: lab_com.width
height: lab_com.height
border.width: 1
border.color: "gray"
TextInput {
id: edit_com
anchors.fill: parent
// enabled: bEnabled
text: "0"
visible: true
font.pixelSize: 16
focus: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
inputMethodHints: Qt.ImhDigitsOnly
validator: IntValidator {top: 65535; bottom: 1}
onFocusChanged: {
// mainVKB.visible = true
}
}
}
MyCppObject{
id: m_object
}
}
3. 函数说明：
int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName);
参数说明：
通过调用qmlRegisterType函数，可以将自定义的C++类型注册到QML中，从而可以在QML代码中使用该类型。在注册成功后，可以在QML中通过该类型的名称来创建该类型的实例，并调用其属性和方法。
uri：表示注册类型的命名空间，通常为项目的名称或者公司的域名，用于区分不同的QML模块。
通常是import的内容：
例如：
qmlRegisterType<MySliderItem>("com.mycompany.qmlcomponents", 1, 0, "Slider");
import com.mycompany.qmlcomponents 1.0
versionMajor：主版本号，用于指定注册类型的版本信息。
versionMinor：次版本号，用于指定注册类型的版本信息。
qmlName：
表示要注册的类型在QML中的名称，可以在QML中直接使用该名称来创建该类型的实例。
首字母大写
C++注册方式2：
// 创建C++对象
MyCppObject myCppObject;
// 将C++对象注册到QML引擎中
engine.rootContext()->setContextProperty("myCppObject", &myCppObject);
4. qml 文件间的调用
命名：首字母大写
使用Load的方式调用问题较多，通常直接使用文件名来调用。
5. 界面布局
QML中布局一般有如下四种方式，
- 绝对坐标：x、y、z、width、height、
- 锚(anchors) 布局
- 定位器（Row、Column、Grid、Flow）
- 布局管理器（GridLayout、RowLayout、ColumnLayout）
锚布局：
这是一种相对位置关系的布局。特别说明margins是间距
定位器：
spacing: 2 //相邻间距
Repeater 重复布局
import QtQuick 2.0
Row
{
Repeater
{
model: 3
Rectangle
{
width: 100; height: 40
border.width: 1
color: "yellow"
}
}
}
Row 水平布局
Column 垂直布局
Grid
Flow
布局管理器： 和Creator中一样
cpp中的函数
void MyCppObject::handleButtonClick()
{
qDebug() << "click";
// 处理按键点击事件
// ...
// 发出自定义信号
emit sigButtonClick();
}
public slots:
void handleButtonClick();
6. 代码举例
Label
Label{
property bool bEnable: false
property int nIndex: 1
signal effective()
signal clicksignal()
id: lab_com
x: 0
y: 0
width: 120
height: 50
text: "端口号"
color: "black"
font.pixelSize: 18
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
background: Rectangle {
implicitWidth: 100
implicitHeight: 40
color: "red"
border.color: "#26282a"
border.width: 1
radius: 4
gradient: Gradient{//颜色渐变
GradientStop { position: 0.0; color: mouseArea.pressed ? "white" : "lightgray"}
GradientStop { position: 1.0; color: mouseArea.pressed ? "lightgray" : "gray"}
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
onReleased: {
bEnable = false
effective()
}
onClicked: {
clicksignal()
}
}
}
Textinput
Rectangle {
width: 178
height: parent.height
color: bEnabled? "white" : "lightgray"
border.width: 1
border.color: "gray"
TextInput {
id: textData
anchors.fill: parent
enabled: bEnabled
text: "0"
visible: true
font.pixelSize: 16
focus: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
inputMethodHints: Qt.ImhDigitsOnly
validator: IntValidator {top: 65535; bottom: 1}
onFocusChanged: {
mainVKB.visible = true
}
}
}
Text
Text {
width: 100
height: 15
text: sLableDown
font.pixelSize: 14
font.bold: true
color: "black"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
