qml与c++交互

     QT5发布,最大的变化就是qml版本的升级,扩展了大量的方法,可见QT官方对qml的重视. qml有着传统脚本语言不具备的优势,语法看来像CSS,支持javascript函式调用. 该脚本能与C++进行交互,这是一般脚本所不能的.可以用来方便编写系统控制脚本,无需编译,直接运行. qml原型其实就是QSA(QT4前发布一个js脚本语言,bug比较多,后废弃了. QT4.7后才出现qml)

 

 一. 导入JS代码

      qml 通过代码 import "xxx.js" as xx 导入,下面实现定时打印当前时间

      

testTimer.js
// qml不支持setTimeout(),只支持Timer

// 打印当前时间
function showTime() {
    var today=new Date();
    var year=today.getFullYear();
    var month=today.getMonth();
    var day=today.getDate();
    var hour=today.getHours();
    var min=today.getMinutes();
    var sec=today.getSeconds();
    console.log("current: "+year+"-"+month+"-"+day+" "+hour+":"+min+":"+sec);
}

main.qml
import QtQuick 1.1
import "testTimer.js" as TestTimer  // 导入js脚本

Rectangle {
    width: 360
    height: 360
    color: "green"

    // 启动定时器,打印当前时间
    Timer{
        id:aTimer
        running:true
        repeat:true
        interval:1000
        onTriggered: TestTimer.showTime();   // 调用js显示时间函数
    }
}

 

二. 调用C++方法

     将C++对象方法加上Q_INVOKABLE 或者声明为槽,都可以被qml访问到

     

// MyObject.h 
class MyObject:public QObject
{
    Q_OBJECT

public:
    Q_INVOKABLE QDateTime getCurTime();

public slots:
    void showMsg();
};

   

// main.cpp

// C++工具方法
MyObject myobj;
	
// 启动脚本解释器
QDeclarativeView *view = new QDeclarativeView;
viewer.rootContext()->setContextProperty("myobj",&myobj); // 注入C++对象

view->setSource(QUrl::fromLocalFile("main.qml"));
view->show();

 

// main.qml

MouseArea {
	anchors.fill: parent
	onClicked: {
	// 调用c++方法
	var s=Qt.formatDateTime(myobj.getCurTime(),"yyyy-MM-dd hh:mm:ss");
	console.debug("current: "+s);

	// 调用c++槽
	myobj.showMsg();

	console.log('I will quit')
	Qt.quit();
}

    

 三. 使用C++自定义对象

      qml可以使用c++自定义对象,处理自定义对象信号 

      

// PieChart.h
// 扩展qml对象,显示一饼图
class PieChart:public QDeclarativeItem
{
  Q_OBJECT

  // 导出name,color属性供qml访问
  Q_PROPERTY(QString name READ name WRITE setName)
  Q_PROPERTY(QColor color READ color WRITE setColor)

public:
    PieChart(QDeclarativeItem *parent=0);

    QString name() const;
    void setName(const QString &name);

    QColor color() const;
    void setColor(const QColor &col);

    void paint(QPainter *, const QStyleOptionGraphicsItem *, QWidget *);

    Q_INVOKABLE void clearChart();

signals:
    void chartCleared(); // 清空图像,在qml处理该信号

private:
    QString m_name;
    QColor m_color;
};

    通过qmlRegisterType() 注册自定义c++对象

   

 // 注册自定义对象,主版本号1,次版本号0,在qml通过名称PieChart访问
qmlRegisterType<PieChart>("Charts",1,0,"PieChart");

   

   调用:

   

import QtQuick 1.1
import Charts 1.0   // 导入自定义c++对象

Rectangle {
    width: 360
    height: 360
    color: "green"

    Text {
        text: qsTr("Hello World")
        anchors.horizontalCenter: parent.horizontalCenter
    }

    // 显示自定义饼图,lupdate提取翻译文字因不识别自定义对象,会报错
    PieChart{
        id: pieChart
        color:"red"
        width: 300; height:300
        anchors.centerIn: parent
        onChartCleared: {   // 处理自定义对象信号
            var msg=qsTr("The chart has been cleared");
            console.log(msg);
        }
    }
}

 

   运行截图: