Customized Qbutton



  • I want to make stylish buttons in QML UI but i have tried it using images on the button but the image cannot be shown, I have Qt 5.4 installed and i dont have options of styled buttons in the QT Designer of QML, so does anyone have any suggestion?



  • Hi,

    To change button style you can use ButtonStyle from QtQuick.Controls.Style, for more information please read "this":http://doc.qt.io/qt-5/qml-qtquick-controls-styles-buttonstyle.html.

    In code this should looks like:
    @
    Button {
    id: btn
    width: 30
    height: 30
    style: ButtonStyle {
    background: Rectangle {
    width: control.width
    height: control.height
    color: "transparent"

                Image {
                    id: iconImage
                    anchors.fill: parent
                    source: "path to icon file"
                }
            }
        }
    }
    

    @



  • I have tried to change the style but its gives be syntax error when i write ButtonStyle



  • Hi,

    You need to import the model:
    @
    import QtQuick.Controls.Styles 1.3
    @

    If you tried this could you share you QML code?



  • Okay i ve tried it but it doesn't appear on screen:

    @import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    import QtQuick.Layouts 1.0
    import QtQuick.Layouts 1.1
    import QtQuick.XmlListModel 2.0
    import QtQuick.Controls.Styles 1.3

    ApplicationWindow {
    id : hola
    title: ("SketchIt")
    width: 640
    height: 480
    minimumWidth: mainToolBar .implicitWidth
    visible: true

    toolBar: ToolBar{
        id : mainToolBar
        anchors.fill :parent
        RowLayout{
         //   width : parent.width
    
            ToolButton{
           // text : ("main")
            iconSource: "C:\\Users\\Hassan Adil\\Documents\\sketchIt\\16.png"
            onClicked: hola.color = "blue"
            anchors.margins: 4
    

    }
    Button {
    id: btn
    width: 230
    height: 130
    style: ButtonStyle {
    background: Rectangle {
    width: control.width
    height: control.height
    // color: "transparent"

                            Image {
                                id: iconImage
                                anchors.fill: parent
                                source: "D:\b.jpg"
                            }
                        }
                    }
                    visible:true;
                }
        Button{
    
            text : "close"
            onClicked: hola.close()
    

    }
    }
    }
    SplitView{
    anchors.fill: parent
    orientation: Qt.Horizontal
    TableView{
    id : flickerTable
    TableViewColumn{role : "title"; title: "Sketches"; width:100}
    model : flicker
    }

    Image{
    source : flicker.get(flickerTable.currentRow).source

    }
    }

    /*XmlListModel{
    id : flicker
    source :"http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags=Cat"
    query : "/rss/channel/item"
    namespaceDeclarations: "declare namespace media="http://search.yahoo.com/mrss/";"
    XmlRole{name:"title"; query: "title/string()"}
    XmlRole{name:"date"; query: "pubDate/string()"}
    XmlRole{name:"source"; query: "media:thumbnail/@url/string()"}
    XmlRole{name:"credit"; query: "media:credit/string()"}
    }
    */

    }

    @



  • Hm... the code looks good. Did you check image path?



  • Yes i did check the path its doesnt show the image


Log in to reply
 

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