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
qt-quick-for-designers-1/components.1371874587.txt.gz · Last modified: 2013/06/22 04:16 by mithat