Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Customized Qbutton
Forum Updated to NodeBB v4.3 + New Features

Customized Qbutton

Scheduled Pinned Locked Moved QML and Qt Quick
7 Posts 2 Posters 1.7k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    Javeria
    wrote on last edited by
    #1

    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?

    1 Reply Last reply
    0
    • shavS Offline
      shavS Offline
      shav
      wrote on last edited by
      #2

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

      @

      Mac OS and iOS Developer

      1 Reply Last reply
      0
      • J Offline
        J Offline
        Javeria
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0
        • shavS Offline
          shavS Offline
          shav
          wrote on last edited by
          #4

          Hi,

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

          If you tried this could you share you QML code?

          Mac OS and iOS Developer

          1 Reply Last reply
          0
          • J Offline
            J Offline
            Javeria
            wrote on last edited by
            #5

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

            }

            @

            1 Reply Last reply
            0
            • shavS Offline
              shavS Offline
              shav
              wrote on last edited by
              #6

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

              Mac OS and iOS Developer

              1 Reply Last reply
              0
              • J Offline
                J Offline
                Javeria
                wrote on last edited by
                #7

                Yes i did check the path its doesnt show the image

                1 Reply Last reply
                0

                • Login

                • Login or register to search.
                • First post
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved