Qt6 Qt Quick UI prototype learning QML first
start creating project
Create a Qt Quick 2 UI project with a QML entry point. To use it, you need to set up a QML runtime environment, such as gmlscene.
Use this only if you are prototyping. You cannot create a complete application with this. Please consider using the Qt Quick application project
Introduction to Qt Quick UI Prototyping
Qt Quick UI Prototype is mainly used to quickly create interactive user interface (UI) prototypes.
It is developed with Qt Quick technology, allowing developers to verify and demonstrate their design concepts and interaction ideas before building applications.
By using Qt Quick UI prototyping, you can visually create and arrange UI elements, define animations and transition effects, set up user interactions, and more. This quickly implements and demonstrates the basic look and functionality of an application so that designers and developers can explore and validate design decisions earlier.
Qt Quick UI Prototyping provides a rich set of reusable UI components and layout options, enabling developers to quickly build prototypes with rich user experiences. It also supports connections to backend logic and can be integrated with other Qt frameworks and tools, such as Qt Creator and Qt Design Studio.
All in all, the main purpose of Qt Quick UI Prototyping is to facilitate a faster UI design, iteration and verification process to improve the efficiency and quality of application development.
.qmlproject file
Automatically generated, regardless of
/* Qt创建者生成的文件 */
import QmlProject 1.1
Project {
mainFile: "untitled2.qml"
/* 包括当前目录和子目录中的.qml、.js和图像文件 */
QmlFiles {
directory: "."
}
JavaScriptFiles {
directory: "."
}
ImageFiles {
directory: "."
}
/*传递给QML运行时的插件目录列表 */
// importPaths: [ "../exampleplugin" ]
}
Give a small example of Window platform
The code is commented
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
// 窗口标题
title: qsTr("QML语法")
// 矩形
Rectangle {
// 每个元素都有唯一的id
id:root;
// 宽 高
width: 640; height: 480
// 字体颜色
color: "#4A4A4A"
Image {
id: triangle
// 相对于父元素 Rectangle的坐标位置
x: (parent.width - width)/2; y: (parent.height - height)/2
// 请注意，您需要将file:///添加到本地文件路径的开头，以指示该路径是一个文件URL。
source: "file:///C://Users//ll//Desktop//QT Projects//untitled2//pic//clock.png"
// 设置图片的宽度和高度
sourceSize: Qt.size(400,400);
}
Text {
id: label
x: (parent.width - width)/2; y:50
// 基于焦点值更改颜色 focus 的值true false 三目运算符
color: focus ? "white" : "black"
// 字体设置
font.family: "Ubuntu"
font.pixelSize: 24
// 文本对齐
horizontalAlignment: Text.AlignHCenter
// 定义属性 变量
property int spacePresses: 0
// 文本 类比setText
text: "Space press: " + spacePresses + " times"
// 信号 如何需要传参数就要用function(参数)
onTextChanged: function(text)
{
// 控制台输出 类比qDebug()
console.log("text changed to : " , text)
}
// 接收关键事件需要焦点 键盘
focus: true
// 键盘 空格按压触发
Keys.onSpacePressed: {
increment()
}
// 键盘 Esc 按下触发
Keys.onEscapePressed: {
// 按下escape后，按下空格键将不再更新显示，因为text属性(文本: "按下空格:"+按下空格+"次")被毁了。
label.text = ''
}
// JavaScript函数increment()
function increment() {
spacePresses = spacePresses + 1;
}
}
}
}
running result
press the space bar
Press ESc
QML Syntax Understanding Syntax
QML syntax
QML is a declarative language for describing how objects relate to each other. QtQuick is a QML-based framework for building application user interfaces. It breaks down the user interface into smaller elements that can be combined into components. QtQuick describes the appearance and behavior of these user interface elements. This user interface description can be enriched with JavaScript code to provide simple but also more complex logic. From this point of view, it follows the HTML-JavaScript pattern, but QML and QtQuick are designed from the ground up to describe user interfaces, not text documents.
In its simplest form, QtQuick allows you to create hierarchies of elements. Child elements inherit the coordinate system from the parent element. An x,y coordinate is always relative to the parent object.
This importstatement imports a module. Optional versions of the following forms. can be added.
Comments can be made using // for single-line comments or /* */ for multi-line comments. Just like in C/C++ and JavaScript
every QML document needs to have a root element like HTML
element declared by its type followed by { }
elements can have attributes in the form of name: value
any element in the QML document Elements can be nested by using their ids (unquoted identifiers)
, which means that parent elements can have child elements. Parent elements can
import QML modules by name using the parent keyword and the import statement. In Qt5 you had to specify a major and minor version (eg 2.15), this is optional in Qt6. For book content, we removed this optional version number, because normally, you will automatically select the latest version from the selected Qt suite.
tip
Usually, you want to access a specific element by id, or use the parent keyword. Therefore, it is good practice to name the root element "root", using id: root. Then you don't have to think about how the root element is named in your QML document.
Let's understand the different characteristics of properties:
(1) id是一个非常特殊的类似属性的值，它用于引用QML文件(在QML称为“文档”)中的元素。
这id不是字符串类型，而是标识符，是QML语法的一部分。
一个id在文档中需要是唯一的，不能被重置为不同的值，也不能被查询。(它的行为很像C++世界中的引用。)
(2)根据属性的类型，可以将属性设置为一个值。如果没有为属性指定值，将选择初始值。
有关属性初始值的更多信息，您需要查阅特定元素的文档。
(3)一个属性可以依赖于一个或多个其他属性。这叫做有约束力的。当绑定属性的依赖属性更改时，
绑定属性会更新。它像合同一样工作，在这种情况下height应该总是两倍于width.
(4)向元素添加新属性是使用property限定符，后跟类型、名称和可选的初始值(property <type> <name> :
<value>).如果没有给定初始值，则选择默认初始值。
(5)声明属性的另一种重要方式是使用alias关键词(property alias <name>: <reference>).
这alias关键字允许我们将对象的属性或对象本身从类型内部转发到外部范围。
我们将在稍后定义组件时使用这种技术，将内部属性或元素id导出到根级别。属性别名不需要类型，
它使用被引用的属性或对象的类型。
(6)这text属性依赖于自定义属性timesint类型的。这int基值自动转换为string类型。
表达式本身是绑定的另一个例子，它导致文本在每次times属性变化。
(7)有些属性是分组属性。当一个属性更加结构化，并且相关属性应该被分组在一起时，使用该功能。
编写分组属性的另一种方式是font {
family: "Ubuntu"; pixelSize: 24 }.
(8)有些属性属于元素类本身。这是为在应用程序中只出现一次的全局设置元素(如键盘输入)完成的。
写的是<Element>.<property>: <value>.
(9)对于每个属性，您可以提供一个信号处理程序。此处理程序在属性更改后调用。
例如，这里我们希望在高度变化时得到通知，并使用内置控制台向系统记录一条消息。
QML and JavaScript (also known as ECMAScript) are best friends.
(1)文本更改处理程序onTextChanged每次文本因按下空格键而改变时，打印当前文本。
当我们使用信号注入的参数时，我们需要在这里使用函数语法。也可以使用箭头功能((text) => {
})，
但是我们觉得function(text) {
}可读性更强。
(2)当文本元素收到空格键(因为用户按了键盘上的空格键)时，我们调用一个JavaScript函数increment().
(3)形式的JavaScript函数的定义function <name>(<parameters>) {
... }，这增加了我们的计数器
spacePresses。每次spacePresses时，绑定属性也将被更新。
The difference between QML :(binding) and JavaScript=(assignment) is that a binding is a contract that stays the same throughout the lifetime of the binding, whereas a JavaScript assignment (=) is a *
one-time assignment*.The lifetime of a binding ends when a new binding is set on the property, or even when a JavaScript value is assigned to the property. For example, a key handler that sets the text property to an empty string breaks our incremental display:
Keys.onEscapePressed: { label.text = '' }After pressing escape, pressing the space bar will no longer update the display because the text property (text: "Pressed space:" + pressed space + "times") is destroyed.In this case, when you have conflicting strategies for changing the property (by binding the text updated by the property's incremental change and the text cleared by the JavaScript assignment), then you can't use binding! You need to use assignment on both property change paths, because assignment breaks the binding (breaks the contract!).