Use Style for QtQuick.Controls from Resources file
-
Hey,
I want to use al the components and stuff in my QT/QML application from the Resources file.
Everything worked but i have a am not able load the style of a QtQuick.Control Item from Recources
Here my Style File: (ButtonStylePercentage.qml)
@import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.2
import QtGraphicalEffects 1.0ButtonStyle {
label: Component {
Text {
text: control.text
clip: true
wrapMode: Text.WordWrap
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
anchors.fill: parent
font.pixelSize: 18
font.bold: true
color: control.hovered ? "#026cce" : "#000000"
}
}
background: Item{
Item {
id: backgroundButton2
implicitWidth: control.width
implicitHeight: control.heightvisible: false Rectangle { id:buttBack2 implicitWidth: control.width-2 implicitHeight: control.height-2 anchors.centerIn: backgroundButton2 border.width: control.activeFocus ? 2 : 1 border.color: "#888" radius: 100 gradient: Gradient { GradientStop { position: 0 ; color: control.pressed ? "#313131" : "#9f9f9f" } GradientStop { position: 1 ; color: control.pressed ? "#4b4b4b" : "#afafaf" } } } } InnerShadow{ source:backgroundButton2 anchors.fill: backgroundButton2 radius: 5 samples: 32 color: "#E0000000" spread: 0.15 } } }@
and here its usage without Resouces File:
This works fine@ Button {
id:button50
text: "50 %"
x:100
y:25+titleBlock.height
width: 100
height: 50onClicked: { contSlider.value = 50 } style: ButtonStylePercentage {} }@
now i tried to use it from Recourcesfile like this
@ Button {
id:button50
text: "50 %"
x:100
y:25+titleBlock.height
width: 100
height: 50onClicked: { contSlider.value = 50 } style: "qrc:///qmlFiles/qml/Komponenten/ButtonStylePercentage.qml" }@
This throws error when executing:
qrc:///qmlFiles/qml/Komponenten/ContControl.qml:113:20: Invalid property assignment: unsupported type "QQmlComponent*"How could this Problem be solved?
Thanks!
Greets Nico
-
Hi,
I think you can't assign a QML file directly to the style since it requires a Component and not Url.
-
If your intention is to keep things separate, you can do this instead.
Keep the ButtonStyle encapsulated in Component type in a separate file. So,MyButtonStyle.qml
@
Component {
ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#888"
radius: 4
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
}
}
}
@and in file where you want to use it, suppose main.qml
@
MyButtonStyle {
id: mystyle
}Button {
text: "A button"
style: mystyle
}
@ -
Thank you.
but this will not help me.Yes i want to to things separately but i also want to access the Style of the Button fromm the Resouces File.
Nico
-
Well you can put the MyButtonStyle.qml file in Resources and load it.
-
I tried to but how is the syntax for doing this?
-
No you can't do it in the way you have shown in the first post. Refer to the example i posted.
-
Ok thanks,
unfortunately this does not help me. -
Could i load the component from the Resources URL and then attach it to the Style of the Button?
-
That is what i explained in the 2 & 3 post :)
I'll try to explain again.
Consider MyButtonStyle.qml and main.qml are QML file's which are present in your Resources file.
MyButtonStyle.qml contains your style Component, it's contents are:
MyButtonStyle.qml
@
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2Component { ButtonStyle { background: Rectangle { implicitWidth: 100 implicitHeight: 25 border.width: control.activeFocus ? 2 : 1 border.color: "#888" radius: 4 gradient: Gradient { GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" } GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" } } } } }
@
and then main.qml is the file which gets loaded first and contains your button and also it loads MyButtonStyle.qml as a Component
main.qml. Afterwards it's id viz. mystyle is set to Button. Thus we have set the Style Component to the Button.
@
import QtQuick 2.2MyButtonStyle { id: mystyle } Button { text: "A button" style: mystyle }
@
Hope this helps...