Syntax to assign multiple icon properties?



  • Hi,

    I am obviously new to QML and I could not find out how to correctly assign multiple icon properties (icon.source, icon.name, icon.color ...) to a custom button that is derived from the AbstractButton template. To assign different font properties I can just write:

    MyButton {
            font.bold: true
            font.pointSize: 10
            font.family: "Times New Roman"
    ...
    
    

    When I try:

            icon.source: "a-url"
            icon.width:  20
    

    I get the error: "icon" does not have members (M17)

    The only possible syntax I found is:

            icon: icon.width = 20
    

    However, when I try to define multiple properties like:

            icon: icon.width = 20
            icon: icon.source = "a-url"
    

    I get a "Duplicate binding" error

    Can someone enlighten me i) why the syntax icon: icon.property = X works and is necessary as opposed to font an ii) how I can specify more than one property?

    Thanks in advance!


  • Lifetime Qt Champion

    Hi,

    Are you using the QML button or the QtQuick.Controls 2 one ? The second one might be easier to customise.



  • @SGaist
    Hi, I am using QtQuick.Controls 2 (more precisely QtQuick.Templates 2.3).



  • What kind of import statements do you have in MyButton.qml and in the file that creates a MyButton instance and assigns those icon properties?



  • @jpnurmi
    Hi, my qml file imports are the following (MyStyle and BStyle are of my own)

    //MyButton.qml
    import QtQuick 2.10
    import QtQuick.Controls 2.3
    import QtQuick.Templates 2.3 as T
    import QtQuick.Controls.impl 2.3 //IconLabel!
    import QtGraphicalEffects 1.0
    import QtQuick.Layouts 1.3
    import MyStyle 1.0
    import BStyle 1.0
    T.AbstractButton {
        id: control
    
        contentItem:
               IconLabel{
                   icon: control.icon
               }
    }
    


  • Ah, I think I can see the problem now. It's just Qt Creator somehow being unable to resolve the icon grouped property when using the dot notation. If you run the app, it runs fine regardless of Qt Creator being silly and complaining. :)

    For what it's worth, both of these syntaxes are allowed:

    // so called "dot notation"
    icon.width:  20
    icon.height:  20
    // ...
    

    or

    // so called "group notation"
    icon {
        width: 20
        height: 20
        // ...
    }
    

    http://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html#grouped-properties



  • @jpnurmi
    Ah, great! I did not try the group notation (at least not with the correct syntax - because it works without Qt Creator complaining) and apparently never tried to compile anyway. Thanks!



  • @jpnurmi said in Syntax to assign multiple icon properties?:

    Ah, I think I can see the problem now. It's just Qt Creator somehow being unable to resolve the icon grouped property when using the dot notation. If you run the app, it runs fine regardless of Qt Creator being silly and complaining. :)

    For what it's worth, both of these syntaxes are allowed:

    // so called "dot notation"
    icon.width:  20
    icon.height:  20
    // ...
    

    or

    // so called "group notation"
    icon {
        width: 20
        height: 20
        // ...
    }
    

    http://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html#grouped-properties

    I have the same issue but still get the "M17" error even using "group notation". The application compiles fine and runs normally, but when I try to switch to Design mode and edit other things, Qt Creator will popup a dialog and stop me from using the Design mode. Do you have any suggestions? Thank you!


Log in to reply
 

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