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
            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: Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s