Saturday, April 2, 2011

Creating Glossy button with QML


Recently while working on my pet QML project I created reusable glossy QML button element. Hope it will help someone.

Well it quite simple to achieve this, I used Gradient element with right color combination and proper mouse event handling. Following is output.



Here is code for Button element from Button.qml
import Qt 4.7

Rectangle {
    id: button
    signal clicked
    property alias text: btnText.text

    height: 50
    //radius: 10
    border.color:"#6a6363"

    gradient: off

     Gradient {
        id:off
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 0.5; color: "lightsteelblue" }
        GradientStop { position: 0.5; color: "black" }
        GradientStop { position: 1.0; color: "black" }
    }

    Gradient {
        id:onn
        GradientStop { position: 0.0; color: "steelblue" }
        GradientStop { position: 0.5; color: "steelblue" }
        GradientStop { position: 0.5; color: "black" }
        GradientStop { position: 1.0; color: "black" }
    }

    Text {
        id:btnText
        anchors.centerIn:parent
        color:"white"
        text: "text"
    }

    MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked:  {
                button.clicked();
            }

            onEntered:{
                button.gradient=onn
                border.color= "steelblue"
            }

            onCanceled:{
                border.color= "#6a6363"
                button.gradient=off
            }

            onExited: {
                border.color= "#6a6363"
                button.gradient=off
            }
        }
}

Following is how you can use above Button element.
    Button {
        anchors.centerIn:parent
        text: "Test Button"
        width: parent.width/2 -10

        onClicked: {
            console.log("Add folder clicked");
        }
    }

3 comments:

  1. Hi Kunal, for a Glossy Effect more realistic you need change some properties, look at this: http://quicking.wordpress.com/2011/07/15/glossy-effect-with-gradients/

    ReplyDelete
  2. I thanks for comment, I will try it.

    ReplyDelete