Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to create QML applications". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

0. What is QML?

QML is a declarative programming language used to describe the user interface of applications, and Qt Quick is the standard library for QML applications.

Why did I choose to study QML?

Easy to use

High readability

There are many learning materials, with a variety of documents and examples.

Cross platform

The performance is not poor, and the fluency is good.

1. How to create a QML application?

Take a chestnut:

In Qt Creator, click:

-> File-> New File or Project

-> Applications-> Qt Quick Application

Then click next all the way to finish.

Modify main.qml:

/ File main.qml import QtQuick 2.12 import QtQuick.Window 2.12 Window {visible: true width: 320 height: 240 title: qsTr ("Hello World") Rectangle {width: 320 height: 240 color: "green" Text {anchors.centerIn: parent text: "Hello, World!"}

This completes your first QML program, which displays "Hello World!" on a green rectangle.

Running effect:

Window, Rectangle, and Text here are all types in QML, and the term is QML Type.

Learn more about QML Type:

The QML Type System

QML Basic Types

QML Object Types

two。 Use Qt Quick Controls

What is Qt Quick Controls?

Qt Quick Controls is a set of controls for building a complete interface in Qt Quick.

For example:

/ File main.qml import QtQuick 2.12 import QtQuick.Controls 2.12 ApplicationWindow {visible: true title: qsTr ("Hello World") width: 320 height: 240 menuBar: MenuBar {Menu {title: qsTr ("File") MenuItem {text: qsTr ("& Open") onTriggered: console.log ("Open action triggered") } MenuItem {text: qsTr ("Exit") onTriggered: Qt.quit ();} Button {text: qsTr ("Hello World") anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter}}

The ApplicationWindow, MenuBar, and Button here are first of all QML Type, and they are the controls provided in Qt Quick Controls.

ApplicationWindow is a general window control.

MenuBar is a menu bar control

Button is a key control

Running effect:

Learn more about Qt Quick Controls:

Qt Quick Layouts-Basic Example

Qt Quick Controls-Gallery

3. Processing user input

One of the great advantages of using QML to design an interface is

It allows designers to use simple JavaScript expressions to define how the application reacts to events.

In QML, events are called signals, and these signals are processed by signal handlers.

For example:

/ / File main.qml ApplicationWindow {. Rectangle {width: 100height: 100color: "red" anchors.verticalCenter: parent.verticalCenter Text {anchors.centerIn: parent text: "Hello, World!"} TapHandler {onTapped: parent.color = "green"}

Running effect:

TapHandler is used to respond to touchscreen or mouse clicks, and here we use it to handle clicks on green squares.

Further event handling:

Signal and Handler Event System

4. Property binding

What is attribute binding?

Objects and their properties form the basis of the graphical interface defined in the QML file.

QML allows attributes to be bound to each other in various ways, resulting in a highly dynamic user interface.

For example:

/ / File main.qml ApplicationWindow {Rectangle {width: 100 height: 100 color: "red" Rectangle {width: parent.width / 2 height: parent.height / 2 color: "green"}

Running effect:

The length and width of the child rectangle are bound to the geometry of the parent rectangle.

If the length and width of the parent rectangle changes, the length and width of the child rectangle will be automatically updated due to property binding.

5. Custom QML Type

Each QML file implicitly defines a QML type that can be reused in other QML files.

For example:

Create a new QML file MessageLabel.qml:

/ / File MessageLabel.qml import QtQuick 2.12 Rectangle {height: 50 property string message: "debug message" property var msgType: ["debug", "warning" "critical"] color: "black" Column {anchors.fill: parent padding: 5.0spacing: 2 Text {text: msgType.toString (). ToUpperCase () + "font.bold: msgType = =" critical "font.family:" Terminal Regular "color: msgType =" warning "| msgType = =" critical "? "red": "yellow" ColorAnimation on color {running: msgType = = "critical" from: "red" to: "black" duration: 1000 loops: msgType = "critical"? Animation.Infinite: 1}} Text {text: message color: msgType = "warning" | | msgType = = "critical"? "red": "yellow" font.family: "Terminal Regular"}}

It can be understood that we have created a control called MessageLabel.

Quote MessageLabel:

/ / File main.qml Window {. Column {... MessageLabel {width: parent.width-2 msgType: "debug"} MessageLabel {width: parent.width-2 message: "This is a warning!" MsgType: "warning"} MessageLabel {width: parent.width-2 message: "A critical warning!" MsgType: "critical"}

Running effect:

We have easily constructed a control called MessageLabel, which can be used to implement different levels of log printing.

This is the end of "how to create QML applications". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.