Qt Development-QT Quick
foreword
QT QuickAnd Qt widgetsthese two technologies are strongly recommended QT Quickby the government.
The layout in QT Quick generally has the following four methods,
- Absolute coordinates: x, y, z, width, height, top, left
- anchors layout
- Locators (Row, Column, Grid, Flow)
- Layout Manager (RowLayout, ColumnLayout, GridLayout, StackLayout)
The absolute layout is easy to understand, and it will be displayed when the value is given, but it is not flexible;
anchors is actually an attribute set of Item
Row is a separate Item, which is specially used to manage other Items. The layouts described later are also similar.
Parameters for the anchors layout:
//left top right bottom alignment
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
//Centering and Offset
anchors.centerIn : Item
anchors.horizontalCenter : AnchorLine
anchors.verticalCenter : AnchorLine
anchors.horizontalCenterOffset : real
anchors.verticalCenterOffset : realin
- real specific value
- Item is the ID or parent of the build
- bool is true or false
- AnchorLine example
anchors.horizontalCenter: parent.horizontalCenter
Notice
Do not use anchors in Row or RowLayout-related components, which will cause the characteristics of the component itself to be ineffective.
window settings
window properties
Window {
title: qsTr("A normal title window") //window title
width: 640 //Width
height: 480 //Height
visible: true
color: "#ffffff" //Main Window Color
//#00000000 transparent for window
//QML supports color styles such as black (without #)
//QML supports color styles such as #11cfff
//QML also supports RGB format
flags: Qt.Window //Window flag Indicates what window is used | to split, the default is Qt.Window
//Qt.Window normal window mode, with title bar
//Qt.FramelessWindowHint hides the title bar window
opacity: 1 //Transparency The value range is 0~1, decimals are supported, and the default is 1
x:0 // Located at the x position of the parent form, starting from the upper left corner, the default is 0 (at this time, the parent form of the window is the desktop)
y:0 //Located at the y position of the parent window, starting from the upper left corner, the default is 0 (at this time, the parent window of the window is the desktop)
}Rimless
Window {
width: 640
height: 480
visible: true
color: "#fefefe"
title: qsTr("Window Title")
flags: "FramelessWindowHint"
}The title bar is displayed, but the maximize and minimize buttons are not closed
Window { width: 640 height: 480 visible: true color: "#fefefe" title: qsTr("Window Title") flags: "CustomizeWindowHint" }
Background transparent borderless window
Window { width: 640 height: 480 visible: true color: "#00000000" title: qsTr("Window Title") flags: Qt.FramelessWindowHint opacity:1 }
The opacity attribute is to set the opacity of the current component and subcomponents, so it is not applicable
color: Qt.rgba(0,0,0,0)It is for the current setting of transparency and will not be passed to subcomponents
components
basic components
These insides can also be filled with other components
- MouseArea
- Rectangle
- Positioning components and layout managers
- Locators (Row, Column, Grid, Flow)
Layout Manager (RowLayout, ColumnLayout, GridLayout, StackLayout)
Layout
Attributes to be used in the layout layout need to be referenced
import QtQuick.Layouts 1.12Example 1
a simple example
Distributed horizontally, 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
in
RowLayout {
id: row
height: 200
spacing: 0
anchors.left:parent.left
anchors.right:parent.right
}with
RowLayout {
id: row
height: 200
width:parent.width
spacing: 0
}are equivalent, the former uses the anchor (anchors) layout
Layout.fillWidth: trueRelated attributes can only be used in Layout-related spaces .
So it is RowLayoutpossible to realize that the element fills the remaining space, Rowbut it is not possible, unless we copy the value calculated by the width.
code show as below
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("loaded")
}
}Rectangle events
Rectangle {
width: 600
height: 400
anchors.centerIn: parent
color: "lightgray"
TapHandler {
//When the screen is clicked, the pressed attribute is modified to trigger onPressedChanged
onPressedChanged: {
console.log("press ? : ", pressed)
}
//trigger onLongPressed when long press
onLongPressed: {
console.log("long pressed")
}
}
}QML signals and slots
way 1
For properties in QML, if its value changes, QML will automatically generate related signals
on<Property>Changedthis format
Example:
MouseArea {
onPressedChanged: console.log("value:" , pressed)
}way 2
More suitable in the same QML file
signal <name> (type parameter, type parameter)
on<Name>E.g:
signal testSignal(real x, real b)
testSignal(x, b) //Execute, that is, send a signal, similar to emit signal() in quick
onTestSignal: console.log("xxx")// Slot for receiving signalsExample:
Item {
signal clickTest();
MouseArea {
onPressed: {
clickTest()
}
}
onClickTest: consloe.log("received")
}way 3
If it is suitable for one-to-many or cross-QML disconnection, just use disconnect 1: It is in the same scope as the signal, so it can be written like this
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 it can connect to formats that are not defined in QML:
Connections {
target: <source of signal>
on<Signal>:
}Connections {
target: mytest
onTestT: {
send21();
}
}