QML Note

QML Notes

1. 自定义控件

新建MyItem.qml 文件，自定义 如下（文件名就是控件名，第一个字母大写）

import QtQuick 2.4


Item {
    id: container
    property alias cellColor: rectangle.color//cunstom var/property
    signal clicked(color cellColor)//singal

    width: 40; height: 25

    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }

    MouseArea {
        anchors.fill: parent
        onClicked: container.clicked(container.cellColor)//触发信号
    }
}

使用：

import QtQuick 2.9
import QtQuick.Controls 2.2


ApplicationWindow {
    visible: true
    width: 640
    height: 480
    color: "#e9e9e9"
    title: qsTr("TestWin")

    property string ar: "value"
    property string strvalue: "helloworld"

    Text {
        id: text1
        text: strvalue
        y: 30
        anchors.horizontalCenter: parent.horizontalCenter
        font.pointSize: 24; font.bold: true

    }


    MyItem {
        id: cell
        x: 47
        y: 240
        width: 55
        height: 40
        cellColor: "red"
        onClicked: text1.color = cellColor
    }

}

2. Grid 组件

配合 上面的自定义控件使用如下：

import QtQuick 2.9
import QtQuick.Controls 2.2


ApplicationWindow {
    visible: true
    width: 640
    height: 480
    color: "#e9e9e9"
    title: qsTr("TestWin")

    Text {
        id: text1
        text: strvalue
        y: 30
        anchors.horizontalCenter: parent.horizontalCenter
        font.pointSize: 24; font.bold: true

    }


    Grid {
        id: colorPicker
        x: 4; anchors.bottom: parent.bottom; anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3

        MyItem { cellColor: "red"; onClicked: text1.color = cellColor }
        MyItem { cellColor: "green"; onClicked: text1.color = cellColor }
        MyItem { cellColor: "blue"; onClicked: text1.color = cellColor }
        MyItem { cellColor: "yellow"; onClicked: text1.color = cellColor }
        MyItem { cellColor: "steelblue"; onClicked: text1.color = cellColor }
        MyItem { cellColor: "black"; onClicked: text1.color = cellColor }

    }

}

3. QML 与 C++ Class 互通

新建 tempClass 类：

这里定义两个槽函数：

• QString getStr(); // 返回字符串
• void setqml(); //C++ 直接修改qml 控件属性

“tempClass.h”

#ifndef GETARRAYDATA_H
#define GETARRAYDATA_H

#include <QObject>
#include <QByteArray>
#include <QDebug>


class TempClass : public QObject
{
    Q_OBJECT
public:

public slots:

    QString getStr();

    void setqml();



};

#endif // GETARRAYDATA_H

“tempClass.cpp”

这里 extern QObject *qmlObj; 全局变量，在main.cpp 里声明

#include "tempClass.h"


extern QObject *qmlObj;


QString TempClass::getStr()
{
    return "I am cool boy";
}


void TempClass::setqml(){

    qmlObj->setProperty("strvalue","setqml hello");
    // 要访问其子对象 使用 qmlObj->findChild();
//     QObject *obj = qmlObj->findChild<QObject*>("qmlText");
//     obj->setProperty("text","setqml hello");
//     qDebug() << obj->property("text");

}

“main.cpp”

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>


#include "tempClass.h"

QObject *qmlObj;
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    engine.rootContext()->setContextProperty("tempClass", new TempClass);



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

    qmlObj=engine.rootObjects ().at (0);

    return app.exec();

}

“main.qml”

import QtQuick 2.9
import QtQuick.Controls 2.2


ApplicationWindow {
    visible: true
    width: 640
    height: 480
    color: "#e9e9e9"
    title: qsTr("TestWin")

    property string vTextValue: "value"
    property string strvalue: "helloworld"

    Text {
        objectName: "qmlText" //用于cpp查找对象
        id: text1
        text: strvalue
        y: 30
        anchors.horizontalCenter: parent.horizontalCenter
        font.pointSize: 24; font.bold: true

    }


    Text{
        id: vtext
        anchors.horizontalCenter: parent.horizontalCenter
        y: 200
        text: vTextValue
        font: {family:"arial"}

    }

    Button{
        id: btn
        anchors.horizontalCenter: parent.horizontalCenter
        y:100
        text: "点我"
        onClicked: {vTextValue = tempClass.getStr(); tempClass.setqml()}
    }

}

1. qml 使用 C++ 类

engine.rootContext()->setContextProperty("tempClass", new TempClass); 给qml 根对象 添加类。

2. C++ 直接调用qml 对象

QObject *qmlObj;	//定义QObject指针
qmlObj=engine.rootObjects ().at (0);	// 取其根 对象

找到对应的Object 调用

qmlObj->setProperty("strvalue","setqml hello");
// 要访问其子对象 使用 qmlObj->findChild();
//     QObject *obj = qmlObj->findChild<QObject*>("qmlText");
//     obj->setProperty("text","setqml hello");
//     qDebug() << obj->property("text");