Qt qml相关语法规则和易忘知识点总结(不断更新)

Qml中的易忘知识点

一. Qml中基本数据类型

1. bool: 布尔类型
2. int: 整型，不费话了
3. string：字符串类型
4. real: 在arm平台上是float，在其他平台上等同于double
5. double: 双精度浮点
6. color: 颜色
   color.r: 代表红色分
   color.g: 代表绿色分量
   color.b: 代表蓝色分量
   color.a: 代表透明度分量
   color的赋值：
   1> property color mainColor: Qt.rgba(1,1,1,1): 根据rgba分量构造颜色变量，４个参数值范围0~1
   2> color: “#FF0000” // rgb
   3> color: “#800000FF” // argb
7. point: 坐标
   point.x: x坐标分量
   point.y: y坐标分量
   赋值：myPointProperty: Qt.point(0, 20)
8. size: 尺寸
   size.width: 尺寸宽度
   size.height: 尺寸高度
   赋值：Qt.size(150, 50)
9. rect: 矩形
   rect.x: 矩形左上角x坐标
   rect.y: 矩形左上角y坐标
   rect.width: 矩形宽度
   rect.height: 矩形高度
   赋值：Qt.rect(10, 10, 10, 10)
10. date: 日期
    赋值：MyDatePicker { minDate: “2000-01-01”; maxDate: “2020-12-31” }
11. font: 字体
    string font.family
    bool font.bold
    bool font.italic
    bool font.underline
    real font.pointSize
    int font.pixelSize
12. list: 列表
    赋值：　
    states: [
    State { name: “activated” },
    State { name: “deactivated” }
    ]
    states.length: 列表长度
    states[2]: 用中括号带索引号来访问列表里面的元素

二. Qml与C++类的交互

1. 条件

1. 把C++中的类导入Qml, 这个类需要直接或间接继承自QObject
2. 这个类需要含有　Q_OBJECT 声明

2. 步骤

1. 在C++入口函数里面调用　qmlRegisterType(“hello.world.RadioPlayer”, 1, 0, “RadioPlayer”);　来向qml声明C++类
2. 在Qml中　import hello.world.RadioPlayer 1.0　之后就可以使用　“RadioPlayer” 标签了，qmlRegisterType函数的模板类对应要声明的C++类，前三个参数是对应Qml中的import 包名称和版本信息，第四个参数是C++类在Qml中的标签名称

3. 使用

1. qml调用C++中的函数，C++中对应的函数前面需要添加声明 Q_INVOKABLE
2. C++调用Qml中的函数，可以变相的通过Qml实现C++中的信号来实现，C++中声明为

signals:
	void startWork(QString name, int type);

qml中：

Rectangle {
	RadioPlayer {
		onStartWork: {
			
		}
	}
}

onStartWork对应C++中的　startWork 信号

4. 末尾

C++相关代码

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "radioplayer.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

	// 将RadioPlayer类导入Qml体系中
    qmlRegisterType<RadioPlayer>("hello.world.RadioPlayer", 1, 0, "RadioPlayer");

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/qml/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}

class RadioPlayer : public QObject
{
    Q_OBJECT
    // 在Qml中访问枚举类型，需要用Q_ENUMS来声明枚举类型
    Q_ENUMS(WorkState)
public:
    enum WorkState {
        normal = 0,
        sleep,
        work,
        idle
    };

    explicit RadioPlayer(QObject *parent = nullptr);
    ~RadioPlayer();

signals:
    void startWork(QString name, int type);
    void endWork(QString name);
    void pause(void);
    void idle(bool auto);
    void currentState(WorkState state);


public slots:
    Q_INVOKABLE void enterWork(QString name, int type);
}

Qml相关代码

import hello.world.RadioPlayer 1.0
Rectangle {
	RadioPlayer {
		id: radioplayer
		// 这个onStartWork对应C++类中的信号　startWork(QString name, int type)
		onStartWork: {
			console.log("name: "+name+", type: "+type);
			// 调用C++类中用Q_INVOKABLE声明的方法
			radioplayer.enterWork(name, type);
		}
	}
}

三. 状态

	// 默认状态为“normal”
    state: "normal"

    states: [
        State {
            name: "normal"
            changeState("normal")
        },
        State {
            name: "sleep"
            changeState("sleep")
        }, 
        State {
            name: "idle"
            changeState("idle")
        }
    ]

通过给上面的 state赋值为 normal, sleep, idle　来切换不同的状态