Qt quick learning notes 3

Qt Quick learning notes 3

Today, let's take a look at the basic Rectangle of Qt Quick, which is equivalent to a canvas or background. You can set the size, background color, border, and other components of Qt Quick, first, familiarize yourself with his basic attributes.

Width & heightAs the name implies, the instance is long and wide.

Rectangle{    width:400    height:400}

This will display a rectangle of 400X400. Note !!! Only one Rectangle can be set at the root of a QML file. If it is inside a Rectangle, there is no limit on the quantity.

Next we will introduce the second attribute color

Rectangle{    width:400    height:400    color: "lightblue"}

The color is set to lightblue. Note that the color attribute is different from width and height and must be enclosed in quotation marks. Otherwise, it must not pass unless you use a Qt object to call it, in addition to the defined text, color settings can also use hexadecimal notation.

Rectangle{    width:400    height:400    color: "#e3a203"}

The above image is in hexadecimal notation. You can also use the rgba function of the Qt object to set the color. The Code is as follows:

Rectangle{    width:400    height:400    color: Qt.rgba(0.2,0.5,1,1)}

The above example is the color defined by using the rgba method of Qt. The parameter is of the real number type, the maximum is 1, the minimum is 0, the last is transparency, 1 is opacity, 0 is transparent, if you have a good understanding, you can think about it yourself. There are other color definition methods for the Qt object. You can try it yourself.

Next we will introduce the rotation deformation attribute rotation.

Rectangle{    width:400    height:400    Rectangle    {        width:parent.width / 2        height:parent.height /2        anchors.centerIn: parent        color:"red"        rotation: 100    }}

We can see that the red rectangle has been rotated by 100 degrees, but it looks like the Sawtooth is too obvious. Let's adjust it.

Rectangle{    width:400    height:400    Rectangle    {        antialiasing: true        width:parent.width / 2        height:parent.height /2        anchors.centerIn: parent        color:"red"        rotation: 100    }}

Now it is much better. You only need to add this attribute antialiasing: true to enable the anti-aliasing effect. The trouble is that you need to add this attribute for each component to use anti-aliasing, if it is used globally, it will not be effective for all internal components. You can use the default attribute to try it later. I have not tried it yet.