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 signalsgive 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();
}
}