Custom Button containing Image and Text



  • Hello,

    I'm creating my first application with QML and I'm also new to Qt at all :)

    I like to create buttons that are similar to QtCreators (left) sidebar buttons (Welcome, Edit, Design etc): So that they consist of an icon and a label. As far as i 'researched' at various sources in the internet there are a few approaches. In the main.qml i like to use the following structure (is that ok?):

    // main.qml
    
    //..
    GroupBox {
       /* some properties */
        ButtonGroup {
            buttons: mainButtons.children
        }
        Column {
             id: mainButtons
             CustomButton {
                 id: btn1
             }
             CustomButton {
                 id: btn2
             }
        }
    }
    //..
    

    My first try was declaring a CustomButton like:

    // CustomButton.qml
    import QtQuick 2.0
    import QtQuick.Controls 2.2
    import QtQuick.Controls.Material 2.2
    
    Button {
        width: ...
    }
    

    But including an icon seems impossible to me. I also saw the CustomButton Example at Qt's website, but why use 'Item' and so on for declaring a button, as long as there's a separate 'Button' item?

    This looks really confusing to me. In addition to that: Is there a common way / structure of storing images in the resource folder? I like to use *.svg files (Material Design Icons by Google), but i read that *.png files are recommended.

    So there's a lot to cover here, but i think it's all in the context of creating custom buttons in a recommended way.

    Thanks!



  • Hello,
    see this : http://doc.qt.io/qt-5.10/qml-qtquick-controls2-button.html & http://doc.qt.io/qt-5.10/qml-qtquick-controls2-abstractbutton.html if you want to customize QML Button Type,

    or you can create your own Btn

    Rectangle{
     Image{
    ...
    }
    Text{
    ...
    }
    MouseArea{
    ...
    }
    }
    

    LA



  • Qt Quick Controls 2.3 (Qt 5.10) has added support for icons in Buttons and Actions: http://doc.qt.io/qt-5.10/qtquickcontrols2-icons.html


Log in to reply
 

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