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.3ApplicationWindow {
id : hola
title: ("SketchIt")
width: 640
height: 480
minimumWidth: mainToolBar .implicitWidth
visible: truetoolBar: 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