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. Qml buttons
Forum Updated to NodeBB v4.3 + New Features

Qml buttons

Scheduled Pinned Locked Moved Solved QML and Qt Quick
9 Posts 2 Posters 5.6k 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.
  • Naveen_DN Offline
    Naveen_DN Offline
    Naveen_D
    wrote on last edited by
    #1

    Hi all,

    I am using few Qml buttons in my project, i have customized the buttons using button style and background rectangle, where i have given a border and border color for a particular button. but when i click on the other buttons i want to set border and border color for that button so that the particular button is highlighted. while doing this, i get the following error :

    ReferenceError: dialbgrect is not defined

    How to resolve this issue ?

    here is my code :

    Button{
                                id: dialButton
                                Layout.preferredHeight: phoneContentRect.height/8
                                Layout.fillWidth: true
                                style: ButtonStyle{
                                    background: Rectangle{
                                        id: dialbgrect
                                        color:"#bdbdbd"
                                        radius: 5
                                        border.width: 2
                                        opacity: 0.4
                                    }
                                }
                                onClicked: {
                                    dial.visible =true
                                    contacts.visible=false
                                    dialbgrect.border.color= "#009688" //<---- ReferenceError: dialbgrect is not defined //
                                    contactBackground.border.color="" //<---- ReferenceError: contactBackground is not defined //
                                }
                                RowLayout{
                                    anchors{
                                        left: parent.left
                                        leftMargin: 10
                                        fill: parent
                                    }
                                    Image {
                                        id: dialImage
                                        source: "qrc:/images/ic_dialpad_white_36dp.png"
                                    }
                                    Text{
                                        text: "Dial Pad"
                                        font.pixelSize: 20
                                        color: "#020202"
                                        font.capitalization: Font.AllUppercase
                                    }
                                }
    
                            }
                            Button{
                                id: contactButton
                                Layout.preferredHeight: phoneContentRect.height/8
                                Layout.fillWidth: true
                                style: ButtonStyle{
                                    background: Rectangle{
                                        id: contactBackground
                                        color:"#bdbdbd"
                                        radius: 5
                                        border.width: 2
                                        border.color: "#009688"
    //                                    opacity: contactButton.pressed ? 0.5: 0.9
                                    }
                                }
                                RowLayout{
                                    anchors{
                                        left: parent.left
                                        leftMargin: 10
                                        fill: parent
                                    }
                                    Image {
                                        id: callListImage
                                        source: "qrc:/images/ic_contacts_white_36dp.png"
                                    }
                                    Text{
                                        text: "Contacts"
                                        font.pixelSize: 20
                                        color: "#020202"
                                        font.capitalization: Font.AllUppercase
                                    }
                                }
                            }
                            Button{
                                id: callListButton
                                Layout.preferredHeight: phoneContentRect.height/8
                                Layout.fillWidth: true
                                style: ButtonStyle{
                                    background: Rectangle{
                                        color:"#bdbdbd"
                                        radius: 5
                                        opacity: callListButton.pressed ? 0.5: 0.4
                                    }
                                }
                                RowLayout{
                                    anchors{
                                        left: parent.left
                                        leftMargin: 10
                                        fill: parent
                                    }
                                    Image {
                                        id: contactsImage
                                        source: "qrc:/images/ic_storage_white_36dp.png"
                                    }
                                    Text{
                                        text: "Call List"
                                        font.pixelSize: 20
                                        color: "#020202"
                                        font.capitalization: Font.AllUppercase
                                    }
                                }
                            }
                            Button{
                                id: messageButton
                                Layout.preferredHeight: phoneContentRect.height/8
                                Layout.fillWidth: true
                                style: ButtonStyle{
                                    background: Rectangle{
                                        color:"#bdbdbd"
                                        radius: 5
                                        opacity: messageButton.pressed ? 0.5: 0.4
                                    }
                                }
                                RowLayout{
                                    anchors{
                                        left: parent.left
                                        leftMargin: 10
                                        fill: parent
                                    }
                                    Image {
                                        id: messageImage
                                        source: "qrc:/images/ic_textsms_white_36dp.png"
                                    }
                                    Text{
                                        text: "Text Message"
                                        font.pixelSize: 20
                                        color: "#020202"
                                        font.capitalization: Font.AllUppercase
                                    }
                                }
                            }
    

    Naveen_D

    1 Reply Last reply
    0
    • ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by
      #2

      Hi,
      you can create your 'ButtonStyle' as separated components, ( BtnStyle1.qml, BtnStyle2.qml, BtnStyle3.qml... )

      like this :
      BtnStyle1.qml

      ButtonStyle{
      background: Rectangle{
      id: contactBackground
      color:"#bdbdbd"
      radius: 5
      border.width: 2
      border.color: "#009688"
      // opacity: contactButton.pressed ? 0.5: 0.9
      }
      }

      and then set them where needed with js binding
      Button{
      id: contactButton
      Layout.preferredHeight: phoneContentRect.height/8
      Layout.fillWidth: true
      style : "js expression" ? BtnStyle1{} : BtnStyle2{}
      }

      LA

      Naveen_DN 1 Reply Last reply
      0
      • ODБOïO ODБOï

        Hi,
        you can create your 'ButtonStyle' as separated components, ( BtnStyle1.qml, BtnStyle2.qml, BtnStyle3.qml... )

        like this :
        BtnStyle1.qml

        ButtonStyle{
        background: Rectangle{
        id: contactBackground
        color:"#bdbdbd"
        radius: 5
        border.width: 2
        border.color: "#009688"
        // opacity: contactButton.pressed ? 0.5: 0.9
        }
        }

        and then set them where needed with js binding
        Button{
        id: contactButton
        Layout.preferredHeight: phoneContentRect.height/8
        Layout.fillWidth: true
        style : "js expression" ? BtnStyle1{} : BtnStyle2{}
        }

        LA

        Naveen_DN Offline
        Naveen_DN Offline
        Naveen_D
        wrote on last edited by Naveen_D
        #3

        @LeLev Thanks for the reply,

        style : "js expression" ? BtnStyle1{} : BtnStyle2{}

        can you please explain what is "js expression" here
        I tried with buttonid.pressed ? BtnStyle1{}:BtnStyle2{} it is showing syntax error

        Naveen_D

        1 Reply Last reply
        0
        • ODБOïO Offline
          ODБOïO Offline
          ODБOï
          wrote on last edited by
          #4

          @Naveen_D here "js expression" is the test (condition).
          Could you please reformulate your question ?

          If you just want change your buttons style when you click on it, best solution is to use 'States' : define your button like this :

          import QtQuick 2.0
          import QtQuick.Controls 1.4
          import QtQuick.Controls.Styles 1.4

          Button{
          id: messageButton

          property bool pressed: false
          
          state : pressed ? "pressed" : ""
          
          onClicked: pressed = !pressed
          
          style: ButtonStyle{
              background: Rectangle{
                  color:messageButton.pressed ? "green" : "blue"
                  radius: 5
                  opacity: messageButton.pressed ? 0.5: 0.4
              }
          }
          
          states:[
              State {
                  name: ""
          
              },
              State {
                  name: "pressed"
          
              }
          ]
          

          }

          LA

          Naveen_DN 1 Reply Last reply
          0
          • ODБOïO ODБOï

            @Naveen_D here "js expression" is the test (condition).
            Could you please reformulate your question ?

            If you just want change your buttons style when you click on it, best solution is to use 'States' : define your button like this :

            import QtQuick 2.0
            import QtQuick.Controls 1.4
            import QtQuick.Controls.Styles 1.4

            Button{
            id: messageButton

            property bool pressed: false
            
            state : pressed ? "pressed" : ""
            
            onClicked: pressed = !pressed
            
            style: ButtonStyle{
                background: Rectangle{
                    color:messageButton.pressed ? "green" : "blue"
                    radius: 5
                    opacity: messageButton.pressed ? 0.5: 0.4
                }
            }
            
            states:[
                State {
                    name: ""
            
                },
                State {
                    name: "pressed"
            
                }
            ]
            

            }

            LA

            Naveen_DN Offline
            Naveen_DN Offline
            Naveen_D
            wrote on last edited by
            #5

            @LeLev thanks, i tried with this it is working.

            If you just want change your buttons style when you click on it

            ya this is the thing i want, but i have a set of four buttons when i click on a particular button only that button's style should be changed, rest should be in the default state and same with other buttons also. how to achieve this using states ?

            Naveen_D

            1 Reply Last reply
            0
            • ODБOïO Offline
              ODБOïO Offline
              ODБOï
              wrote on last edited by
              #6

              Hi,
              look this : https://forum.qt.io/topic/83006/setting-checked-property-of-a-button/2

              You can also do this with QML pure : imagine 3 button with states :

              property int buttonIndex : 0

              Btn{
              state: buttonIndex === 1 : "pressed" : ""
              onClicked : buttonIndex = 1
              }
              Btn{
              state: buttonIndex === 2 : "pressed" : ""
              onClicked : buttonIndex = 2
              }

              Btn{
              state: buttonIndex === 3 : "pressed" : ""
              onClicked : buttonIndex = 3
              }

              LA

              Naveen_DN 1 Reply Last reply
              0
              • ODБOïO ODБOï

                Hi,
                look this : https://forum.qt.io/topic/83006/setting-checked-property-of-a-button/2

                You can also do this with QML pure : imagine 3 button with states :

                property int buttonIndex : 0

                Btn{
                state: buttonIndex === 1 : "pressed" : ""
                onClicked : buttonIndex = 1
                }
                Btn{
                state: buttonIndex === 2 : "pressed" : ""
                onClicked : buttonIndex = 2
                }

                Btn{
                state: buttonIndex === 3 : "pressed" : ""
                onClicked : buttonIndex = 3
                }

                LA

                Naveen_DN Offline
                Naveen_DN Offline
                Naveen_D
                wrote on last edited by
                #7

                @LeLev sir can you please elaborate i am not able to understand how to implement it.. i tried with the following code but didn't work.
                Thanks

                import QtQuick 2.6
                import QtQuick.Window 2.2
                import QtQuick.Controls 1.4
                import QtQuick.Controls.Styles 1.4
                import QtQuick.Layouts 1.1
                
                Window {
                    visible: true
                    width: 640
                    height: 480
                    title: qsTr("Hello World")
                
                    property int  buttonIndex: 0
                
                    ColumnLayout{
                
                    Button{
                        id: messageButton
                        implicitHeight: 50
                        implicitWidth: 100
                        text: "click"
                
                
                        state : buttonIndex===1 ? "pressed" : ""
                
                        onClicked: buttonIndex=1
                
                        style: ButtonStyle{
                            background: Rectangle{
                                color:messageButton.pressed ? "green" : "red"
                                radius: 5
                                opacity: messageButton.pressed ? 0.5: 0.4
                            }
                        }
                
                        states:[
                            State {
                                name: ""
                
                            },
                            State {
                                name: "pressed"
                
                            }
                        ]
                
                    }
                    Button{
                        id: messageButton1
                        implicitHeight: 50
                        implicitWidth: 100
                        text: "click"
                        property bool pressed: false
                
                        state : buttonIndex===1 ? "pressed" : ""
                
                        onClicked: buttonIndex=1
                        style: ButtonStyle{
                            background: Rectangle{
                                color:messageButton1.pressed ? "green" : "red"
                                radius: 5
                                opacity: messageButton1.pressed ? 0.5: 0.4
                            }
                        }
                
                        states:[
                            State {
                                name: ""
                
                            },
                            State {
                                name: "pressed"
                
                            }
                        ]
                    }
                
                    }
                
                }
                
                

                Naveen_D

                1 Reply Last reply
                0
                • ODБOïO Offline
                  ODБOïO Offline
                  ODБOï
                  wrote on last edited by ODБOï
                  #8

                  Hi,

                  First we need to create a Reusable Component (our custom button) and we call it 'Btn.qml' : the first character is in upper case

                  so create new qml file and name it 'Btn.qml'

                  //Btn.qml
                  import QtQuick 2.0
                  import QtQuick.Controls 1.4
                  import QtQuick.Controls.Styles 1.4

                  Button{
                  id: messageButton
                  style: ButtonStyle{
                  background: Rectangle{
                  color:messageButton.state==="pressed" ? "green" : "blue" //if state is "pressed" color will be green, else blue
                  radius: 5
                  opacity: messageButton.state==="pressed" ? 1 : 0.3 //if state is "pressed" opacity will be 1, else 0.3
                  }
                  }
                  states:[
                  State {
                  name: ""
                  },
                  State {
                  name: "pressed"
                  }
                  ]
                  }
                  //---------------------------------------------------------------------------------------------

                  Now we have a custom button and we can use it to create meny buttons .. :

                  //main.qml

                  import QtQuick 2.6
                  import QtQuick.Window 2.2
                  import QtQuick.Controls 1.4
                  import QtQuick.Controls.Styles 1.4

                  Window {
                  visible: true
                  width: 640
                  height: 480
                  title: qsTr("Test Custom Button")

                  property int  menuIndex : 1 
                  
                  Row{
                         anchors.centerIn: parent
                      spacing: 15
                   
                  Btn{ 
                          id: myBtn1
                          height: 90
                          width: 110
                          state: menuIndex === 1 ? "pressed" : "" 
                          onClicked: menuIndex = 1
                      }
                      Btn{
                         id: myBtn2
                          height: 90
                          width: 110
                           state: menuIndex === 2 ? "pressed" : ""
                           onClicked: menuIndex = 2
                      }
                      Btn{
                          id: myBtn3
                          height: 90
                          width: 110
                           state: menuIndex === 3 ? "pressed" : ""
                           onClicked: menuIndex = 3
                      }
                  }
                  

                  }
                  //-------------------------------------------------------------------

                  // ( state: menuIndex === 1 ? "pressed" : "" ) here we say : state depends on "menuIndex " ; if menu index =1 than state = "pressed", so color will turn to green, else state will be " " and the color blue.

                  ok ?

                  More info Reusable Component : http://doc.qt.io/qt-4.8/qmlreusablecomponents.html
                  Property Binding : http://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html

                  LA

                  Naveen_DN 1 Reply Last reply
                  0
                  • ODБOïO ODБOï

                    Hi,

                    First we need to create a Reusable Component (our custom button) and we call it 'Btn.qml' : the first character is in upper case

                    so create new qml file and name it 'Btn.qml'

                    //Btn.qml
                    import QtQuick 2.0
                    import QtQuick.Controls 1.4
                    import QtQuick.Controls.Styles 1.4

                    Button{
                    id: messageButton
                    style: ButtonStyle{
                    background: Rectangle{
                    color:messageButton.state==="pressed" ? "green" : "blue" //if state is "pressed" color will be green, else blue
                    radius: 5
                    opacity: messageButton.state==="pressed" ? 1 : 0.3 //if state is "pressed" opacity will be 1, else 0.3
                    }
                    }
                    states:[
                    State {
                    name: ""
                    },
                    State {
                    name: "pressed"
                    }
                    ]
                    }
                    //---------------------------------------------------------------------------------------------

                    Now we have a custom button and we can use it to create meny buttons .. :

                    //main.qml

                    import QtQuick 2.6
                    import QtQuick.Window 2.2
                    import QtQuick.Controls 1.4
                    import QtQuick.Controls.Styles 1.4

                    Window {
                    visible: true
                    width: 640
                    height: 480
                    title: qsTr("Test Custom Button")

                    property int  menuIndex : 1 
                    
                    Row{
                           anchors.centerIn: parent
                        spacing: 15
                     
                    Btn{ 
                            id: myBtn1
                            height: 90
                            width: 110
                            state: menuIndex === 1 ? "pressed" : "" 
                            onClicked: menuIndex = 1
                        }
                        Btn{
                           id: myBtn2
                            height: 90
                            width: 110
                             state: menuIndex === 2 ? "pressed" : ""
                             onClicked: menuIndex = 2
                        }
                        Btn{
                            id: myBtn3
                            height: 90
                            width: 110
                             state: menuIndex === 3 ? "pressed" : ""
                             onClicked: menuIndex = 3
                        }
                    }
                    

                    }
                    //-------------------------------------------------------------------

                    // ( state: menuIndex === 1 ? "pressed" : "" ) here we say : state depends on "menuIndex " ; if menu index =1 than state = "pressed", so color will turn to green, else state will be " " and the color blue.

                    ok ?

                    More info Reusable Component : http://doc.qt.io/qt-4.8/qmlreusablecomponents.html
                    Property Binding : http://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html

                    LA

                    Naveen_DN Offline
                    Naveen_DN Offline
                    Naveen_D
                    wrote on last edited by
                    #9

                    @LeLev thanks. it is working.

                    Naveen_D

                    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