Qt development - QT Quick

preface

QT Quick and Qt widgets are two technologies that are officially promoted.

There are four general layout methods in QT Quick:,

  1. Absolute coordinates: x, y, z, width, height, top, left
  2. Anchors layout
  3. Locator (Row, Column, Grid, Flow)
  4. 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();
    }
}

Posted on Wed, 10 Nov 2021 19:06:46 -0500 by melody