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.0

    ButtonStyle {
    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.height

                visible: 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: 50

            onClicked: {
                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: 50

            onClicked: {
                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


  • Moderators

    Hi,

    I think you can't assign a QML file directly to the style since it requires a Component and not Url.


  • Moderators

    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


  • Moderators

    Well you can put the MyButtonStyle.qml file in Resources and load it.



  • I tried to but how is the syntax for doing this?


  • Moderators

    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?


  • Moderators

    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.2

    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 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.2

    MyButtonStyle {
        id: mystyle
    }
     
     
    Button {
       text: "A button"
       style: mystyle
    }
    

    @

    Hope this helps...


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.