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
 

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