qt-quick-for-designers-1:components
This is an old revision of the document!
Table of Contents
Components
- It’s a good idea to recycle your code and create components for elements that can be reused.
- To create a component, place a tree of elements in a file with a
.qml
extension.- The tree is then available as a reusable component with the same name as the file but without the
.qml
extension.
- Example:
- ButtonSimple.qml
import QtQuick 1.0 Image { id: button source: "images/button.png" Text { id: label text: "Push me!" color: "white" anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 6 } MouseArea { anchors.fill: parent onClicked: { label.text = "Thanks!"; } } }
- reusing-buttonsimple.qml
import QtQuick 1.0 Item { id: myItem width: 400 height: 400 ButtonSimple { id: myButton anchors.horizontalCenter: myItem.horizontalCenter anchors.bottom: myItem.bottom anchors.bottomMargin: 20 } }
ButtonSimple.qml
andreusing-buttonsimple.qml
must be in the same directory.
Properties
- You can declare a
property
do expose a component's internal propery to the outside:
- ButtonSimple2.qml
import QtQuick 1.0 Image { id: button source: "images/button.png" property string labelText Text { id: label text: labelText color: "white" anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 6 } MouseArea { anchors.fill: parent onClicked: { label.text = "Thanks!"; } } }
- reusing-buttonsimple2.qml
import QtQuick 1.0 Item { id: myItem width: 400 height: 400 ButtonSimple2 { id: myButton labelText: "Hey you!" anchors.horizontalCenter: myItem.horizontalCenter anchors.bottom: myItem.bottom anchors.bottomMargin: 20 } }
Signals
- A
signal
is similar to aproperty
above except that it's used to let the outside world determine behavior. - In the Button below,
buttonClicked
is made a signal that is emitted whenever the MouseArea is clicked.
- Button.qml
import QtQuick 1.0 Image { id: button source: "images/button.png" property string labelText signal buttonClicked() Text { id: label text: labelText color: "white" anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 6 } MouseArea { anchors.fill: parent onClicked: { button.buttonClicked(); } } }
- The actual behavior is defined in the file where Button is used (as the Button's
onButtonClicked
property):
- resuing-button.qml
import QtQuick 1.0 import "randomFile.js" as RandomFunction Item { id: myItem width: 400 height: 400 property int actualStateNumber: 0 Image { source: "images/background.png" } Image { id: spaceship x: -200 y: 50 source: "images/spaceship.png" } Button { id: button labelText: "PRESS" anchors.horizontalCenter: myItem.horizontalCenter anchors.bottom: myItem.bottom anchors.bottomMargin: 20 onButtonClicked:{ myItem.state = RandomFunction.randomState(); } } states: [ State { name: "bottomRight" PropertyChanges { target: spaceship x: 250 y: 200 } }, State { name: "bottomLeft" PropertyChanges { target: spaceship x: 100 y: 200 } }, State { name: "topLeft" PropertyChanges { target: spaceship x: 10 y: 50 } }, State { name: "topRight" PropertyChanges { target: spaceship x: 100 y: 50 } } ] transitions: [ Transition { NumberAnimation { properties: "x,y" duration: 500 easing.type: Easing.OutExpo } }, Transition { from: "" to: "topLeft" SequentialAnimation{ PauseAnimation { duration: 1000 } NumberAnimation { properties: "x,y" duration: 500 easing.type: Easing.OutExpo } } } ] Component.onCompleted:{ myItem.state = "topLeft"; } }
qt-quick-for-designers-1/components.1371875088.txt.gz · Last modified: 2013/06/22 04:24 by mithat