QML--学习第二篇

来源：互联网发布：windows虚拟机 mac os 编辑：程序博客网时间：2024/06/07 06:24

QML的学习，一直找不到一个很好的参考资料，七零八落，找不到一个渐进的资料。希望自己学习的过程，给大家带来一些帮助。

QML之组件：

依然是main.cpp(当然，没有main.cpp），直接可以使用qmlviewer.exe 直接打开 xml当然可以）

#include <QtWidgets/qapplication.h>#include <qtdeclarative/QDeclarativeview.h>int main(int argc, char *argv[]){QApplication a(argc, argv);QDeclarativeView *m_qmlView = new QDeclarativeView(); m_qmlView->setSource(QUrl::fromLocalFile("source.qml"));  //load qml filem_qmlView->show();return a.exec();}

我们给我们首先调用的qml为source.qml

import QtQuick 1.0Rectangle {    id: page    width: 320; height: 240    color: "lightgray"    Text {        id: helloText        text: "Hello world!"        y: 30        anchors.horizontalCenter: page.horizontalCenter  //居中显示        font.pointSize: 24; font.bold: true              //字体大小    }    Grid {                                               //grid 摆放 下面的6个 Cell元素        id: colorPicker        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4        rows: 2; columns: 3; spacing: 3                  //2行 3列        Cell { cellColor: "red"; onClicked: helloText.color = cellColor } //响应 clicked消息，设置 id为 helloText 的颜色值        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }    }}

source.qml使用了一个非标准的空间Cell, Cell是另外一个qml文件提供的自定义控件

Cell.qml

import QtQuick 1.0Item {    id: container    property alias cellColor: rectangle.color    signal clicked(color cellColor)                 //clicked 消息    width: 40; height: 25    Rectangle {        id: rectangle        border.color: "white"        anchors.fill: parent    }    MouseArea {                                                    anchors.fill: parent        onClicked: container.clicked(container.cellColor) //响应 clicked消息    }}

库文件：Qt5Declaratived.lib Qt5Guid.lib Qt5Widgetsd.lib Qt5Cored.lib

环境： VS2010 + win7-64位 + Qt5.1.1

运行效果：选择不同的颜色块，字体显示不同颜色

注： qmlviewer.exe 目录为 Qt的bin目录下（我的相对目录为 Qt5.1.1/5.1.1/msvc2010/bin）

2 0