QML learning notes

Briefly
- 1. Basic grammar
- 2. Type
  - 2.1 enumeration
- 3. Attributes
  - - 1. ID attribute
    - 2. Property Attributes
    - 3. Signal Attributes
    - 4. Signal Handler Attributes
    - 5. Method Attributes
    - 6. enumeration attribute

Briefly

The writing environment of this article is:

Version: Qt 6.5.3

IDE: Qt creator

Simply summarize some summary of learning QML last year. It takes a certain grammatical foundation to read this article.hello WorldThis is simply divided intoGrammatical basis，Characteristic basis，Type of component，Common components，QML interaction with C ++。

1. Basic grammar

QML is a declarative language describing the user interface. It decomposes the user interface into some smaller elements that can be combined into a component.

The QML language describes the shape and behavior of the user interface element. The user interface can use JavaScript to provide modification, or add more complicated logic. From this perspective, it follows the HTML-JAVAScript mode, but QML is designed to describe the user interface, not a text document.

Understanding from the hierarchical structure of QML elements is the simplest way of learning. The sub -element inherits the coordinate system from the parent element. Its x and y coordinates are always corresponding to its parent element coordinate system.

Therefore, learning it also needs some foundation of JavaScript. If you have learned C, C ++ and other languages, you can learn JavaScript later.I won't go into details here

Qml file.qmlFor expansion names.
All components under the management of a root component management
After the example, the note will explain the meaning of most of the sentences

Example:

Import qtquick 2.15 // Import modules of version of Qtquick 2.15

 Window {// root component
     ID: rootwindow // ID name of a "file" unique identifier in the component
     width: 400 // <Properties>: <Value>
     height: 300
     color: "LightBlue"
     : {// Component creation is completed
         show (); // Under normal circumstances, it does not need to call the display window manually, which will be automatically opened. It is written because it will not automatically display the window when it is not automatically displayed
     }

     Rectangle {// rootwindow sub -component
         ID: Rectangle
         width: 100
         height: 100
         : rootwindow // Let the component keep in the middle of the rootwindow
     }
 }

Import to the module version that has been specified, the structure isimport Module name [Version number]After QT6, the version number can be written or not, and the latest version will be automatically introduced.
Window,RectangleRely onQtQuickThe component provided by the module, the composition of a component is the same as the common language.Under the letter, line, number compositionBut there is a special need for componentsThe beginning of the uppercase letter indicates that it is a component，I like pure letters composition。
Herewidth : 400Example, correspondingwidthFor attribute name,:The meaning of binding (Explanation in attribute section later)，400As the attribute value

2. Type

propertyIt is the meaning of the registration attribute, the author will be there laterAttribute sectionexplain.

Type name	describe	Exemplary example
`bool`	Indicates True/False.	`property bool isActive: true`
`date`	Indicates date and time.	`property date lastUpdated: new Date()`
`double`	Represents dual -precision floating points.	`property double value: 3.1415`
`int`	Indicates an integer.	`property int count: 100`
`string`	Represents text string.	`property string greeting: "Hello, QML!"`
`url`	Express the resource path.	`Image { source: "asset:///images/" }`
`enumeration`	Express the enumeration value and cannot represent the type.	`enum Direction { Left, Right, Up, Down }`
`list`	Express the object list, the structure is list <type name>.	`list<type> myList = [obj1, obj2, obj3]`
`real`	Represents real numbers (and`double`similar).	`property real coordinate: 123.456`
`var`	Indicates a general type, which can accommodate any type of value.	`property var dynamicValue: "Hello"`
`variant`	Indicates variant type and is used to store the values of multiple data types.	`property variant settings: { name: "John", age: 30 }`
`void`	Indicates the type of empty value.	`property void emptyValue`

2.1 enumeration

The enumeration type is a bit special. I give an example. I personally do not recommend using QML registered enumeration. QT Creator is not well supported. Without intelligent prompts, the author generally from C ++ registered enumeration type to QML.

Example:

enum direction {// register enumeration
         Left, right, up, downn
     }
     // list list
     Property list <int> listint: [, 2,3,4]

3. Attributes

The attribute is a bit special. Next, the author will explain in turn.

1. ID attribute

Each QML object has one uniqueidproperty.
idUsed to identify objects and allow other objects to reference it.
idIt must start with a lowercase letter or lower line, and it cannot contain special characters.
idIt cannot be changed after the object is instantiated.

Example:

TextInput { id: myTextInput; text: "Hello World" }
Text { text:   }

2. Property Attributes

The attribute is used to store the state or value of the object.
The attribute can be a static value or a dynamic binding expression.
When defining attributes, you can use the modification keyword:default(Default attribute),required(Must -fill attributes),readonly(Read only attributes);
structure:Decorate property Type name Attribute name : Attribute value
readonlyModifying form, the author often needs componentsInternal maintenance attributesorA constant valueAs the following exampleQCButtonThe number of clicks of a record is maintained inside. I don't want the objects outside the component to change it. The details are as follows.
requiredThe modifier needs to be compareduserProvide value, I need to give a button to specify the role of the button when using it.

Example:

//
 Import qtquick 2.15
 import

 Rectangle {
     ID: Button
     // Those who need to use QCBUTTON must specify the name attribute
     Required Property String name
     // Click the number of times. ReadOnly can only be initialized once, and the effect of changing its value by binding it to other changes to it can be changed
     Readonly Property int Count:
     width: 100
     height: 100
     : Parent

     Text {// text component
         ID: Text
         : Parent
         text: qstr (name) + Count
     }

     Mousearea {
         ID: Area
         Property int ClickedCount: 0
         : Parent // Fill the parent component
         OnClicked: {// Every click +1
             Clivedcount ++;
         }
     }
 }

//
 Import qtquick 2.15

 Window {// root component
     ID: rootwindow
     // The default attribute DEFAULT can be written or not written because the default is "default attribute"
     Default Property String
     // I didn't write it here
     Property String Buttontext: "Click Number:"

     width: 400
     height: 300
     color: "LightBlue"
     : {{
         show ();
     }

     // qcbutton custom component
     Qcbutton {
         name:
 // Count: 0 // Here is wrong, because the attributes modified by Readonly can only be initialized once
         : Parent
     }
 }

3. Signal (Signal Attributes)

The signal is used to notify other objects when specific events occur.
The signal is provided by the QML type, for exampleonTextChangedRepresents the change of text.

Example:

onNextColorChanged: ("The  next color will be: " + ())

4. Signal Handler Attributes

The signal processing program is a code block that responds to the signal, which is actually the slot function.

Example:

onNextColorChanged: ("The  next color will be: " + ())

5. Method attributes

The method is to define the JavaScript function on the object.

Example:

function setInternalColor() {
    color = "#111111"
}

6. Enumeration attributes

Um is used to define a set of constants.
Example:
```
enum { Red, Green, Blue }
```