Customized Qbutton

Javeria

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?

shav

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"
            }
        }
    }
}

@

Javeria

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

shav

Hi,

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

If you tried this could you share you QML code?

Javeria

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()"}
}
*/

}

@

shav

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

Javeria

Yes i did check the path its doesnt show the image