Qml buttons
-
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 } } }
-
Hi,
you can create your 'ButtonStyle' as separated components, ( BtnStyle1.qml, BtnStyle2.qml, BtnStyle3.qml... )like this :
BtnStyle1.qmlButtonStyle{
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
-
@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 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.4Button{
id: messageButtonproperty 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
-
@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 ?
-
Hi,
look this : https://forum.qt.io/topic/83006/setting-checked-property-of-a-button/2You 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
-
@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.
Thanksimport 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" } ] } } }
-
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.4Button{
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 .. :
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4Window {
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.htmlLA
-
@LeLev thanks. it is working.
