Beautifying Hello World


Now let’s add something more visual appealing to the text. We will add a frame around the text using a grayed border and a gradient for the background. To make the text readable we change the text color to white.

import Qt 4.6

Rectangle {
    width: 200
    height: 200

    Rectangle {
        x:66; y:93
        /* adjust rectangle dimension based on text size */
        width: text.width+16; height: text.height+16
        // our border
        border.width: 2;
        border.color: "gray"
        radius: 4; smooth: true
        gradient: Gradient { // background gradient
            GradientStop { position: 0.0; color: "#424242" }
            GradientStop { position: 1.0; color: "black" }
        }
        Text {
            id: text // object id of this text
            color: "white"
            // center the text on parent
            anchors.horizontalCenter:parent.horizontalCenter;
            anchors.verticalCenter:parent.verticalCenter;
            text: "Hello World"
        }
    }
}

We needed to wrap the Text tag into another rectangle to provide the additional visual appearance. We use the Text’s id attribute to adjust the rectangles dimension.

So what does it looks like:

I leave it up to the reader to combine this with the bouncing hello world.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s