Qml buttons

Naveen_D

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

LeLev

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_D

@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

LeLev

@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_D

@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 ?

LeLev

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_D

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

            }
        ]
    }

    }

}

LeLev

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_D

@LeLev thanks. it is working.

Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Qml buttons