preface
QT Quick and Qt widgets are two technologies that are officially promoted.
There are four general layout methods in QT Quick:,
- Absolute coordinates: x, y, z, width, height, top, left
- Anchors layout
- Locator (Row, Column, Grid, Flow)
- Layout manager (RowLayout, ColumnLayout, GridLayout, StackLayout)
The absolute layout is easy to understand. It is displayed when the value is given, but it is not flexible;
anchors is actually a property set of an Item
Row is a separate Item dedicated to managing other items. The layouts described later are similar.
Parameters of anchors layout:
//Align top left and bottom right anchors.left : AnchorLine anchors.top : AnchorLine anchors.right : AnchorLine anchors.bottom : AnchorLine //Margin anchors.leftMargin : real anchors.topMargin : real anchors.rightMargin : real anchors.bottomMargin : real anchors.margins : real //Baseline alignment and offset anchors.baseline : AnchorLine anchors.baselineOffset : real anchors.mirrored : bool anchors.fill : Item //Center and offset anchors.centerIn : Item anchors.horizontalCenter : AnchorLine anchors.verticalCenter : AnchorLine anchors.horizontalCenterOffset : real anchors.verticalCenterOffset : real
among
- real specific value
- Item is the ID or parent of the build
- bool is true or false
- AnchorLine example anchors.horizontalCenter: parent.horizontalCenter
be careful
Do not use anchors in components related to Row or RowLayout, which will make the characteristics of the component itself ineffective.
Window settings
Properties of the window
Window { title: qsTr("A general title window") //Window title width: 640 //width height: 480 //height visible: true //Whether it is visible. The default value is true color: "#ffffff "/ / window background color //#00000000 is window transparent //QML supports color styles such as black (no #) //QML supports #11cfff and other color styles //QML also supports RGB format flags: Qt.Window //The window flag indicates which window uses | segmentation. The default is Qt.Window //Qt.Window normal window mode with title bar //Qt.frameleswindowhint hide the title bar window opacity: 1 //The transparency value range is 0 ~ 1. Decimals are supported. The default value is 1 x:0 //It is located at the x position of the parent form, starting from the upper left corner, and defaults to 0 (at this time, the parent form of the window is the desktop) y:0 //It is located in the y position of the parent form, starting from the upper left corner, and defaults to 0 (at this time, the parent form of the window is the desktop) }
no border
Window { width: 640 height: 480 visible: true color: "#fefefe" title: qsTr("Main page") flags: "FramelessWindowHint" }
The title bar is displayed, but the max min button is not turned off
Window { width: 640 height: 480 visible: true color: "#fefefe" title: qsTr("Main page") flags: "CustomizeWindowHint" }
Background transparent borderless window
Window { width: 640 height: 480 visible: true color: "#00000000" title: qsTr("Main page") flags: Qt.FramelessWindowHint opacity:1 }
The opacity attribute is used to set the opacity of the current component and its sub components, so it is not applicable
color: Qt.rgba(0,0,0,0) is the transparency of the current setting and will not be transferred to sub components
assembly
Basic components

The interior of these components can also be filled with other components
- MouseArea
- Rectangle
Locate components and layout manager

Locator (Row, Column, Grid, Flow)
Layout manager (RowLayout, ColumnLayout, GridLayout, StackLayout)
Layout
The properties of the layout to be used need to be referenced
import QtQuick.Layouts 1.12
Example 1
A simple example
Transverse distribution, the last one fills the remaining space.
import QtQuick 2.14 import QtQuick.Window 2.14 import QtQuick.Layouts 1.12 Window { width: 640 height: 480 visible: true color: "#f3f3f3" title: qsTr("Main page") RowLayout { id: row height: 200 spacing: 0 anchors.left:parent.left anchors.right:parent.right Rectangle { id: rectangle width: 200 height: parent.height color: "red" } Rectangle { id: rectangle2 width: 200 height: parent.height color: "green" } Rectangle { id: rectangle3 height: parent.height color: "blue" Layout.fillWidth: true } } }
Display effect

among
RowLayout { id: row height: 200 spacing: 0 anchors.left:parent.left anchors.right:parent.right }
and
RowLayout { id: row height: 200 width:parent.width spacing: 0 }
Is equivalent, the former uses anchors layout
The property related to Layout.fillWidth: true can only be used in Layout related spaces.
Therefore, RowLayout can fill the remaining space with elements, but Row cannot, unless we copy the width through the calculated value.
The code is as follows
import QtQuick 2.14 import QtQuick.Window 2.14 import QtQuick.Layouts 1.12 Window { width: 640 height: 480 visible: true color: "#f3f3f3" title: qsTr("Main page") Row { id: row height: 200 spacing: 0 anchors.left:parent.left anchors.right:parent.right Rectangle { id: rectangle width: 200 height: parent.height color: "red" } Rectangle { id: rectangle2 width: 200 height: parent.height color: "green" } Rectangle { id: rectangle3 height: parent.height width: parent.width-rectangle.width-rectangle2.width color: "blue" } } }
Example 2
Basic events and button press color change and click events
import QtQuick 2.14 import QtQuick.Window 2.14 import QtQuick.Layouts 1.12 Window { width: 640 height: 480 visible: true color: "#f3f3f3" title: qsTr("Main page") MouseArea { width: 200 height: 200 anchors.centerIn: parent Rectangle { id:myrect anchors.fill: parent color: "blue" Text { text: "click" color: "white" font.pixelSize: 16 anchors.centerIn: parent } } onClicked: { console.log("Area Click") } onPressedChanged: { if(pressed){ myrect.color="green" }else{ myrect.color="blue" } console.log(pressed) } } Component.onCompleted: { console.log("Loading complete") } }
Events for Rectangle
Rectangle { width: 600 height: 400 anchors.centerIn: parent color: "lightgray" TapHandler { //When clicking the screen, the pressed property is modified to trigger onPressedChanged onPressedChanged: { console.log("press ? : ", pressed) } //Long time triggered onLongPressed onLongPressed: { console.log("long pressed") } } }
QML signal and slot
Mode 1
For attributes in QML, if their values change, QML will automatically generate relevant signals
On < property > changed
give an example:
MouseArea { onPressedChanged: console.log("value:" , pressed) }
Mode 2
It is more suitable to be in the same QML file
signal <name> (type parameter, type parameter) on<Name>
For example:
signal testSignal(real x, real b) testSignal(x, b) //Execute, that is, send a signal, similar to the emit signal() in quick onTestSignal: console.log("xxx")// The slot is used to receive signals
give an example:
Item { signal clickTest(); MouseArea { onPressed: { clickTest() } } onClickTest: consloe.log("received") }
Mode 3
Suitable for one to many or cross QML Just disconnect 1: in the same range as the signal, it can be written as follows
signal sendSignal(); MouseArea { sendSignal() } Component.onCompleted: { sendSignal.connect(send21) sendSignal.connect(send22) sendSignal.connect(send23) } function send21() { console.log("1: received signal"); } function send22() { console.log("2: received signal"); } function send23() { console.log("3: received signal"); }
2: If not in the same range as the signal
MyTest { signal testT() id : mytest MouseArea { onPressed: { mytest.testT() } } } Component.onCompleted: { mytest.testT.connect(send21) // mytest.testT.disconnect(send21) mytest.testT.connect(send22) mytest.testT.connect(send23) } function send21() { console.log("1: received signal"); } function send22() { console.log("2: received signal"); } function send23() { console.log("3: received signal"); }
3. The main advantage of Connections is that you can connect to things that are not defined in QML Format:
Connections { target: Source of signal on<Signal>: }
Connections { target: mytest onTestT: { send21(); } }