Custom Button containing Image and Text

maxoox

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!

ODБOï

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

jpnurmi

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