Planned maintenance has been done but it did not solve the problem. So work will continue on this and a new time for trying updates will be announced asap.

How I can create custom Style for Qt Quick Controls?



  • Hi everyone!

    I've created my Qt Quick Component. This component is a part of my plugin and I want to use special Style to create customization of my component. I've found this "wiki article":http://qt-project.org/wiki/QmlStyling but I can't understand how I can use this object.

    My code for Style component looks like:
    @
    import QtQuick 2.3

    QtObject {
    property QtObject backgroundColors: QtObject {
    property color normalColor: "white"
    property color pressedColor: "lightsteelblue"
    }

    property int rowHeight: 30
    property int itemOffset: 22
    property QtObject titleLabel: QtObject {
        property QtObject font: QtObject {
            property string family: "Helvetica Neue"
            property bool bold: true
            property bool italic: false
            property bool underline: false
            property real pointSize: 15
        }
        property QtObject colors: QtObject {
            property color normalColor: "black"
            property color pressedColor: "white"
        }
    }
    
    property QtObject descriptionLabel: QtObject {
        property QtObject font: QtObject {
            property string family: "Helvetica Neue"
            property bool bold: false
            property bool italic: false
            property bool underline: false
            property real pointSize: 12
        }
    
        property QtObject colors: QtObject {
            property color normalColor: "black"
            property color pressedColor: "white"
        }
    }
    property QtObject icon: QtObject {
        property int height: 16
        property url url: "../../images/expander.png"
    }
    

    }
    @

    When I've create it like this:
    @
    property ShavTreeViewStyle style: ShavTreeViewStyle { }
    @

    All works fine! But when I try to use it from main file like this:
    @
    ShavTreeView {
    id: treeView
    anchors.right: parent.right
    width: 300
    height: parent.height
    datasList: list
    style: ShavTreeViewStyle {
    icon.height: 22
    }
    }
    @

    I've received the error message:
    @
    QQmlApplicationEngine failed to load component
    qrc:/main.qml:47 Cannot assign to non-existent property "height"
    @

    How I can create Style object to use in my component?

    Thanks for the any help!



  • Hi everyone!

    I've still have a problem with custom style. For now I've used in my project this code:
    @
    import QtQuick 2.3

    QtObject {
    property int rowHeight: 30
    property int itemOffset: 22
    property color backgroundNormalColor: "white"
    property color backgroundPressedColor: "lightsteelblue"

    property string titleLabelFontFamily: "Helvetica Neue"
    property bool titleLabelFontBold: true
    property bool titleLabelFontItalic: false
    property bool titleLabelFontUnderline: false
    property real titleLabelFontPointSize: 14
    property color titleLabelNormalColor: "black"
    property color titleLabelPressedColor: "white"
    
    property string descriptionLabelFontFamily: "Helvetica Neue"
    property bool descriptionLabelFontBold: false
    property bool descriptionLabelFontItalic: false
    property bool descriptionLabelFontUnderline: false
    property real descriptionLabelFontPointSize: 11
    property color descriptionLabelNormalColor: "black"
    property color descriptionLabelPressedColor: "white"
    
    property int iconPixelSize: 10
    property url iconUrl: "../../images/expander.png"
    

    }
    @

    As you can see from source I've removed all subobjects from root object. The question is: How I can use object not only "simple" type like: color, int, url, etc.?

    P.S. I've also tryen property with var type but when I try change property of subobject I've receive the error fro first post.


Log in to reply