Qt Learning Path: QML basic elements

 

QML basic elements can be divided into visual elements and non-visual elements of two categories. Visual elements, such as those previously mentioned Rectangle , have geometric coordinates that occupy a display area on the screen. Non-visual elements (for example Timer ) typically provide a feature that can be used for visual elements.

In this chapter we will focus on the most basic visual elements: Item ,,, Rectangle Text , Image and MouseArea .

ItemIs the most basic of all visual elements. It is the parent element of all other visual elements, which can be said to be inherited by all other visual elements Item . Itemthere is no drawing of itself, its function is to define the common properties of all visual elements:

Grouping	Properties
Geometry	x and y define the coordinates of the upper-left corner of the element, width and height The scope of the element is defined. Z defines the cascading relationships up and down the elements.
layout	anchors (with properties such as left, right, top, bottom, vertical, and horizontal center) for locating The position of the element relative to the margins of the other element.
keyboard handling	Key and keynavigation properties for keyboard control; Focus property is used to enable keyboard processing, which is to get focus.
morph	provides scale and rotate variants and more generally for x, y, z-coordinate value transformations, and Transformorig The Transform Property List of the in point. The
visualization	opacity property is used to control transparency; visible property controls display/hide elements; Clip The property is used to cut the element; the smooth property is used to enhance rendering quality. The
Status definition	provides a list of States states and the current status State property; Transitions list that sets the animation effect when the state toggles.

As we said earlier, we Item define the properties that all visual elements have. So in the following sections, we'll cover these properties again in detail.

In addition to defining common properties, Item Another important function is as a container for other visual elements. From this point, it Item is very similar to the role of the DIV tag in HTML.

RectangleInherited Item , and on Item the basis of the addition of the fill color properties, border-related properties. To define a rounded rectangle, Rectangle There is also an radius attribute. The following code defines a rectangle with a width of 100 pixels, a height of 150 pixels, a light metal blue fill, and a red 4-pixel border:

1234567891011

Rectangle { ID: rect width: height: color: "Lightsteelblue" Border { color: "#FF0000" width: 4     } radius: 8 }

The color values in the QML can be either using the color name or the # hexadecimal form. The color name here is consistent with the SVG color definition, which can be found in this page.

RectangleIn addition to color attributes, there is an gradient attribute that defines the use of gradient fills. For example:

12345678910

Rectangle { width: height: gradient: gradient {         GradientStop< Span class= "crayon-h" > { position: 0.0; color: "Red" }         GradientStop< Span class= "crayon-h" > { position: 0.33; color: "yellow" Span class= "crayon-h" > } gradientstop { position: 1.0; color: "green" }     } border. Color: "Slategray" }

gradientRequires an Gradient object. The object requires a GradientStop list. We can understand the gradient in this way: the so-called gradient is that we specify that a certain color must be in a position, and the transition color of the period is computed. GradientStopobject is used for this designation, it requires two properties: position and color . The former is a floating-point number from 0.0 to 1.0, indicating the position of the y-axis direction, such as the top of the element is 0.0, the bottom is 1.0, the position between the top and bottom can be expressed in such a floating-point number, that is, a proportion; the latter is the color value of this position. For example, the above GradientStop { position: 0.33; color: "yellow" } description is yellow from top to bottom one-third. The current version of QML (Qt 5.2) only supports gradients in the y-axis direction, and if you need a gradient in the x-axis direction, you need to perform a rotation, which we'll explain later. Also, the current version QML does not support angle gradients. If you need an angle gradient, it's best to choose a pre-made picture. The result of this code execution is as follows:

It is important to note that the Rectangle width and height must be specified (either explicitly or implicitly), otherwise it cannot be displayed on the screen. This is usually a common mistake.

If you need to display text, you need to use the Text element. The Text most important attribute of an element is, of course, a text property. This property type is string . Textelements calculate their initial width and height based on text and font. Fonts can be set through the Font property group (for example font.family , and font.pixelSize so on). If you want to set the text color, you only need to set the color property. The Text simplest use is as follows:

123456

Text { text: "The quick brown fox" color: "#303030" font. Family: "Century" font. Pixelsize: }

Operation Result:

TextThe text in an element can use the horizontalAlignment and verticalAlignment attributes to specify the alignment. To further enhance text rendering, we can also use style and styleColor two properties. These two properties allow us to specify the display style of the text and the color of those styles. For very long text, we usually choose to use it at the end of the text ..., we need to use the property at this point. elide elideproperty also allows you to specify ... The display location. If you do not want to use this display method, we can also choose to wrapMode specify the line break mode through the property. For example, the following code:

123456789101112

Text { width: height: text: "A very very long text" elide: Text. Elidemiddle style: Text. Sunken stylecolor: ' #FF4444 ' verticalalignment: Text. AlignTop Font { pixelsize:     }}

The text of the element here has an Text ellipsis position in the middle of the line of text, and a style Sunken with a #FF4444 color.

TextThe function of the element is to display the text. It does not show any background of the text, which is something another element needs to accomplish.

Imageelement is used to display the image. Currently, QML supports image formats such as PNG, JPG, GIF, and BMP. In addition, we can also directly to the source property of a URL from the network to load the image, you can also fillMode set the property to change the size of the behavior. For example, the following code snippet:

1234567891011121314151617

Image { x: ; y: //width:48 //height:118 source: "Assets/rocket.png" }Image { x: ; y: width: height: 118/2 source: "Assets/rocket.png" fillmode: Image. Preserveaspectcrop clip: true }

Note Here we say that the URL can be a local path (./images/home.png), or you can make the network path (http://example.org/home.png). This is also a major feature of QML: Network transparency. If you remember the weather program we tried to do earlier, we had a lot of energy to load the pictures from the Internet. But in QML, this is not a problem. If a URL is a network, QML will automatically load the corresponding resource from this address.

In the above code, we used Image.PreserveAspectCrop , meaning equal proportional cutting. At this point, we need to set the properties at the same time to clip avoid the objects being rendered out of the element range.

The last basic element we're going to introduce is MouseArea . As the name implies, this element is used for user interaction. This is an invisible rectangular area that captures mouse events. We have seen this element in the previous example. Typically, we use this element in conjunction with a visual element so that the visual element can interact with the user. For example:

1234567891011

Rectangle { ID: rect1 x: ; y: width: ; height: color: "Lightsteelblue" Mousearea {         /* ~~ */    }}

MouseAreais an important part of QtQuick, which decouples visual presentation from user Input control. With this technique, you can display a smaller element, but it has a large, interactive area to find a balance between the interface display and the user interaction (if the smaller area on the mobile device is not easily clicked by the user successfully). Apple requires a minimum of 40 pixels to interact with the interface to be able to easily be in the finger point.

Qt Learning Path: QML basic elements