QML之Utility(Connections,Component,Timer,QtObject,Qt, WorkerScript,Loader,Repeater, SystemPalette,FontLoader,LayoutItem)

1、Connections

       将一个信号连接到某个组件上

        MouseArea { Connections { onClicked: foo(...) } } Item { id:container width: 300; height: 300 MouseArea { id: mouseArea anchors.fill: parent } Connections { target: mouseArea onClicked:console.log("hello") } }

2、Component

      Component用来封装一个QML组件的定义，实现组件重用,例如用作ListView的delegate。

      import Qt 4.7 Item { width: 100; height: 100 Component { id: redSquare Rectangle { color: "red" width: 10 height: 10 } } Loader { sourceComponent: redSquare } Loader { sourceComponent: redSquare; x: 20 } }

     Component可以使用Qt.createComponent()动态创建.

     import Qt 4.7 Item { id: container width: 300; height: 300 function loadButton() { var component = Qt.createComponent("Button.qml"); if (component.status == Component.Ready) { var button = component.createObject(container); button.color = "red"; } } Component.onCompleted: loadButton() }

     Rectangle { Component.onCompleted: console.log("Completed Running!") Rectangle { Component.onCompleted: console.log("Nested Completed Running!") } }

Rectangle { Component.onDestruction: console.log("Destruction Beginning!") Rectangle { Component.onDestruction: console.log("Nested Destruction Beginning!") } }

 

 

 

3、Timer

      基本上种编程语言的类库中都有这个类.

       Item { width: 200 height: 200 Timer { id: timer interval: 500; running: false; repeat: true onTriggered: time.text = Date().toString() } Text { id: time } MouseArea { anchors.fill: parent onPressed: {timer.start()} onReleased: {timer.stop()} } } 

       官方文档给出了一个Clock的例子：

       //Clock.qml import Qt 4.7 Item { id: clock width: 200; height: 230 property alias city: cityLabel.text property int hours property int minutes property int seconds property real shift property bool night: false function timeChanged() { var date = new Date; hours = shift ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours() night = ( hours < 7 || hours > 19 ) minutes = shift ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes() seconds = date.getUTCSeconds(); } Timer { interval: 100; running: true; repeat: true; onTriggered: clock.timeChanged() } Image { id: background; source: "clock.png"; visible: clock.night == false } Image { source: "clock-night.png"; visible: clock.night == true } Image { x: 92.5; y: 27 source: "hour.png" smooth: true transform: Rotation { id: hourRotation origin.x: 7.5; origin.y: 73; angle: (clock.hours * 30) + (clock.minutes * 0.5) Behavior on angle { RotationAnimation{ direction: RotationAnimation.Clockwise } } } } Image { x: 93.5; y: 17 source: "minute.png" smooth: true transform: Rotation { id: minuteRotation origin.x: 6.5; origin.y: 83; angle: clock.minutes * 6 Behavior on angle { RotationAnimation{ direction: RotationAnimation.Clockwise } } } } Image { x: 97.5; y: 20 source: "second.png" smooth: true transform: Rotation { id: secondRotation origin.x: 2.5; origin.y: 80; angle: clock.seconds * 6 Behavior on angle { RotationAnimation{ direction: RotationAnimation.Clockwise } } } } Image { anchors.centerIn: background; source: "center.png" } Text { id: cityLabel y: 200; anchors.horizontalCenter: parent.horizontalCenter color: "white" font.bold: true; font.pixelSize: 14 style: Text.Raised; styleColor: "black" } } 

 

//clocks.qml import Qt 4.7 import "content" Rectangle { width: 640; height: 240 color: "#646464" Row { anchors.centerIn: parent Clock { city: "New York"; shift: -4 } Clock { city: "Mumbai"; shift: 5.5 } Clock { city: "Tokyo"; shift: 9 } } }

 

 

5、QtObject

       QtObject是所有QML组件的基组件

     import Qt 4.7 Item { width: 200; height: 100 QtObject { id: attributes property string name property int size property variant attributes } Text { text: attributes.name } Component.onCompleted: attributes.name = "Hello world!"; }

     C++应用程序可以使用QObject::findChild定位QML中的组件.

     //MyRect.qml import Qt 4.7 Item { width: 200; height: 200 Rectangle { anchors.fill: parent color: "red" objectName: "myRect" } }  

 

   //main.cpp #include <QtGui/QApplication> #include "mainwindow.h" #include <QDeclarativeView> #include <QDeclarativeItem> int main(int argc, char *argv[]) { QApplication a(argc, argv); QDeclarativeView view; view.setSource(QUrl("qrc:/ui/qml/MyRect.qml")); view.show(); QDeclarativeItem *item = view.rootObject()->findChild<QDeclarativeItem *>("myRect"); if(item) item->setProperty("color",QColor(Qt::yellow)); return a.exec(); } /*别忘了在.pro文件中加上这句 QT += gui declarative 我是将qml文件加在了qrc资源文件里所以用 QUrl("qrc:/ui/qml/MyRect.qml") 若直接引用本地文件可以这样： QUrl::fromLocalFile("MyRect.qml") */

 

6、Qt

      QML 的全局Qt对象是提供了许多有用的枚举和方法,

      Qt object不是一个QML组件，不能被实例化，可以直接使用Qt.md5("Hello world")

 

7、WorkerScript

     WorkerScript可以用于在QML中使用线程  。

     //workerscript.qml import Qt 4.7 Rectangle { width: 300 height: 200 Text { id: myText text: "Click anywhere" } WorkerScript { id: myWorker source: "script.js" onMessage: myText.text =messageObject.reply } MouseArea { anchors.fill: parent onClicked: myWorker.sendMessage({"x":mouse.x,"y":mouse.y}) } } 

 

//script.js WorkerScript.onMessage = function (message) { WorkerScript.sendMessage({'reply':'Mouse is at '+message.x+","+message.y}); }

WorkerScript::onMessage(jsobject msg)：当接收从另一个线程调用sendMessage发送的消息后触发

 

8、Loader

      Loader用于延迟创建component直到需要的时候。

     import Qt 4.7 Item { width: 200; height: 200 MouseArea { anchors.fill: parent onClicked: pageLoader.source = "Page1.qml" } Loader { id: pageLoader } }

Item { Component { id: redSquare Rectangle { color: "red"; width: 10; height: 10 } } Loader { sourceComponent: redSquare } Loader { sourceComponent: redSquare; x: 10 } }

如果Loader source被改变，则任何已经实例化的组件将被销毁，设置source为空字符串或者设置sourceComponent为undefined,当前组件将被销毁。可以用此卸载Page.qml

 Loader有status属性:
Loader.Null - no QML source has been set
Loader.Ready - the QML source has been loaded
Loader.Loading - the QML source is currently being loaded
Loader.Error - an error occurred while loading the QML source

 Loader {
     id: loader
     onStatusChanged: if (loader.status == Loader.Ready) console.log('Loaded')
 }

 Text { text: loader.status != Loader.Ready ? 'Not Loaded' : 'Loaded' }

 

8、Repeater

Repeater组件被用于创建大量的小组件。
它有三个属性：
count : int
delegate : Component
model : any

 

Row { Repeater { model: 3 Rectangle { width: 100; height: 40 border.width: 1 border.color: "blue" color: "yellow" } } }

Row { Rectangle {width: 10;height: 20; color: "red"} Repeater { model: 10 Rectangle {width:20;height: 20;radius: 10;color: "blue"} } Rectangle {width: 10;height: 20; color: "red"} }

 

Repeater有index属性表示当前item的索引

Column { Repeater { model: 10 Text { text: "I'm item " + index } } }

 

使用modelData属性表示各项的数据

Column { Repeater { model: ["apples","oranges","pears"] Text { text: "Data: "+modelData} } }

 

Item { //XXX does not work! Can't repeat QtObject as it doesn't derive from Item. Repeater { model: 10 QtObject {} } } //重复显示的项必须是派生于Item

 

使用model，和delegate

Rectangle { width: 400;height: 300 ListModel { id: msnModel ListElement { name: "01" pic: "images/Messenger_01.png" } ListElement { name: "02" pic: "images/Messenger_02.png" } ListElement { name: "03" pic: "images/Messenger_03.png" } ListElement { name: "04" pic: "images/Messenger_04.png" } } Component { id:msnDelegate Rectangle{ Image{ id:img; source: pic;width: 80;height: 80;x: index*80;y: 0} Text { text: name;x: index*80+img.width/2;y: img.height } } } Repeater { model: msnModel delegate:msnDelegate } }

 

 

9、SystemPalette

      import Qt 4.7 Rectangle { SystemPalette { id: myPalette;colorGroup: SystemPalette.Active} width: 500 height: 400 color: myPalette.window Text { anchors.fill: parent text: "Hello";color: myPalette.windowText } } 

 

10、FontLoader

        字体加载器用于根据名称加载字体.包含三个属性:

        name : string

        source : url

        status : enumeration

import Qt 4.7 Column { FontLoader { id: fixedFont; name: "Courier" } FontLoader { id: webFont; source: "http://www.mysite.com/myfont.ttf" } Text { text: "Fixed-size font"; font.family: fixedFont.name } Text { text: "Fancy font"; font.family: webFont.name } }

status属性是个枚举类型,即字体加载状态：

• FontLoader .Null - no font has been set
• FontLoader .Ready - the font has been loaded
• FontLoader .Loading - the font is currently being loaded
• FontLoader .Error - an error occurred while loading the font

• //Trigger a state change State { name: 'loaded'; when: loader.status = FontLoader.Ready } //Implement an onStatusChanged signal handle FontLoader { id: loader onStatusChanged: if (loader.status == FontLoader.Ready) console.log('Loaded') } //Bind to the status value Text { text: loader.status != FontLoader.Ready ? 'Not Loaded' : 'Loaded' }

 

11、LayoutItem