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



  • @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.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



  • @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/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



  • @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"
    
                }
            ]
        }
    
        }
    
    }
    
    


  • 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



  • @LeLev thanks. it is working.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.