I have been able to get simple properties to work; text, color, source, rotation. Properties that have more levels(?) do not seem to work. I have this working as a base class(?)
//OnOffImage.qml
import QtQuick 2.0
Item {
id: root
width: container.childrenRect.width
height: container.childrenRect.height
property alias text: label.text
property alias color: label.color
property alias source: image.source
property alias rotation: image.rotation
signal clicked
Column {
id: container
Text {
id: label
width: image.width
font.bold: true
font.capitalization: Font.AllUppercase
font.pointSize: 24
horizontalAlignment: text.AlignHCenter
}
Image {
id: image
fillMode: Image.PreserveAspectFit
}
}
MouseArea {
anchors.fill: parent
onClicked: root.clicked()
}
states: [
State {
name: "on"
PropertyChanges {target: image; source: "qrc:/files/images/SwitchOn.png"}
},
State {
name: "off"
PropertyChanges {target: image; source: "qrc:/files/images/SwitchOff.png"}
}
]
onClicked: {state == "on" ? state = "off" : state = "on"}
}
//OnOffImage.qml
import QtQuick 2.0
Item {
id: root
width: container.childrenRect.width
height: container.childrenRect.height
property alias text: label.text
property alias color: label.color
property alias source: image.source
property alias rotation: image.rotation
signal clicked
Column {
id: container
Text {
id: label
width: image.width
font.bold: true
font.capitalization: Font.AllUppercase
font.pointSize: 24
horizontalAlignment: text.AlignHCenter
}
Image {
id: image
fillMode: Image.PreserveAspectFit
}
}
MouseArea {
anchors.fill: parent
onClicked: root.clicked()
}
states: [
State {
name: "on"
PropertyChanges {target: image; source: "qrc:/files/images/SwitchOn.png"}
},
State {
name: "off"
PropertyChanges {target: image; source: "qrc:/files/images/SwitchOff.png"}
}
]
onClicked: {state == "on" ? state = "off" : state = "on"}
}
To copy to clipboard, switch view to plain text mode
and am using it like this
Column {
id: container
spacing: 25
anchors.centerIn: parent
OnOffImage {
id: switch1
color: "#ffffff"
text: "Switch 1"
source: "qrc:/files/images/SwitchOff.png"
}
}
Column {
id: container
spacing: 25
anchors.centerIn: parent
OnOffImage {
id: switch1
color: "#ffffff"
text: "Switch 1"
source: "qrc:/files/images/SwitchOff.png"
}
}
To copy to clipboard, switch view to plain text mode
The aliases I have work fine, and for right now it is not a problem. I have not figured out how to alias the font properties, or more importantly, the state properties. I can set the initial source easy enough, but as it is, clicking will always change it to the hard coded images. I tried this the long way around, by putting the states and onClick with each instance in main.qml, and it worked fine. Well, it worked fine until I tried to save the state of each "button", and they all pile don top of each other, but that is a different problem. If someone could help me understand how to alias the states property, I might be able to figure out the rest.
Bookmarks