效果

在这里插入图片描述

QML语法父文件 MyQML.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12Window {id: windowvisible: truewidth: 600height: 600title: qsTr("QML study")Rectangle {id:rectwidth:300height: 300color: "gray"// TextInput允许用户输入一行文本。元素支持输入约束，例如validator, inputMask，以及echoMode.TextInput {id: input1x: 8; y: 8width: 96; height: 20text: "Text Input 1"color: "red"}TextInput {id: input2x: 8; y: 36width: 96; height: 20text: "Text Input 2"color: "red"// focus: true   // 光标闪动}// 用户可以在一个TextInput来改变焦点。为了支持通过键盘切换焦点，我们可以使用KeyNavigation// 3和4可以通过键盘tab键来回切换TextInput {id: input3x: 8; y: 66width: 96; height: 20text: "Text Input 3"color: "blue"KeyNavigation.tab: input4}TextInput {id: input4x: 8; y: 86width: 96; height: 20text: "Text Input 4"color: "blue"KeyNavigation.tab:input3}// 尝试使用tab键进行导航。你将体验到焦点并没有改变// 为了防止这种情况，QML提供了FocusScopeRectangle {color: "blue"width:300height: 120anchors.bottom: rect.bottomTLineEditV1  {id:put1anchors.verticalCenter:  parent.verticalCenterwidth: parent.width - 10border.color: "#ff0000"}TLineEditV1  {id:put2anchors.verticalCenter:  parent.verticalCenteranchors.verticalCenterOffset: +40width: parent.width - 10border.color: "#ff0000"}}}// 文本编辑Rectangle {id:rect1width: 136height: 120color: "blue"x:rect.width + rect.xTTextEdit {id:inputx:8; y:8width: rect1; height: 104focus: truetext: "Text Edit"}}// 第三部分 Keys元素 屏蔽以上生效 焦点没有定位到当前元素// 文本编辑Rectangle {id:rect3width: 300height: 300color: "black"y:rect.height + rect.y + 10Rectangle {id:spuarex:8; y:8color: "green"width: 50; height: 50}// 键盘焦点focus: trueKeys.onLeftPressed: spuare.x -= 8Keys.onRightPressed: spuare.x += 8Keys.onUpPressed: spuare.y -= 8Keys.onDownPressed: spuare.y += 8// + - 放大和缩小Keys.onPressed: function (event) {switch(event.key) {case Qt.Key_Plus:      // shift +  放大spuare.scale += 0.2break;case Qt.Key_Minus:  // shift -  缩小spuare.scale -= 0.2break;}}}
}

这段代码是一个使用QtQuick和QML编写的简单界面示例。它包含了几个元素，如窗口、矩形、文本输入框和按键响应等。

首先，在代码开头我们导入了几个QtQuick相关的模块。

接下来，定义了一个窗口（Window）元素，设置了它的一些属性，如可见性、宽度、高度和标题等。

窗口内部有一个矩形（Rectangle）元素，设置了它的宽度、高度和颜色。

在矩形内部有几个文本输入框（TextInput）元素，每个文本输入框设置了位置、宽度、高度、默认文本和颜色等属性。其中，输入框input1和input2没有指定键盘焦点，而输入框input3和input4之间设置了键盘焦点切换Tab键的功能。

在矩形下方，还有一个更大的矩形容器，它的颜色为蓝色，用于演示焦点范围(FocusScope)的应用。这个容器内部又包含了两个自定义的文本输入框（TLineEditV1元素），类似于上面的输入框，但使用了不同的样式设置。

矩形的右侧是另一个矩形（rect1），用于展示文本编辑器（TTextEdit）的使用。这个编辑器设置了位置、宽度、高度、默认文本和焦点等属性。

最后，是一个按键响应（Keys）元素。它包含了一些按键事件处理函数，如左、右、上、下方向键表示移动一个矩形（spuare）的位置，加号（+）和减号（-）表示缩放矩形的大小。

总的来说，这段代码演示了在QML中如何创建窗口、矩形、文本输入框和按键响应的基本用法。

QML语法子文件 TLineEditV1.qml

import QtQuick 2.0Rectangle {width: 96; height: input.height + 20color: "lightsteelblue"border.color: "gray"// 如果您想导出TextInput完全可以通过使用property alias input: input。第一input是属性名，其中第二个输入是元素id。/* 在这段代码中，`property alias`用于创建一个别名属性，使得可以通过该别名来访问其他元素的属性。1. `text: input.text`：创建了一个别名属性`text`，它与`input`元素的`text`属性相同。这意味着可以通过`text`属性直接访问`input`元素的`text`属性。例如，`window.text`将等同于`window.input.text`。2. `input: input`：创建了一个别名属性`input`，它与`input`元素相同。这意味着可以通过`input`属性直接访问`input`元素本身。例如，`window.input`将等同于`input`元素本身。通过使用`property alias`，可以方便地在代码中访问其他元素的属性和对象，简化了代码的书写和阅读。*/property alias text: input.textproperty alias input: inputTextInput {id: inputanchors.fill: parentanchors.margins: 4focus: truetext: "请输入..."}
}

该代码段的目的是创建一个矩形框和一个文本输入框，并使用别名属性来简化对文本输入框属性的访问。

首先，通过import QtQuick 2.0语句导入了QtQuick模块。

代码中的主体是一个矩形（Rectangle）元素，设置了它的宽度、高度、颜色和边框颜色等属性。

接下来使用了property alias语法来创建别名属性。其中包含了两个别名属性：

text: input.text：这条语句创建了一个别名属性text，使得可以通过text属性直接访问input元素的text属性。例如，window.text将等同于window.input.text。
input: input：这条语句创建了一个别名属性input，使得可以通过input属性直接访问input元素本身。例如，window.input将等同于input元素本身。

通过使用property alias语法，可以方便地在代码中访问其他元素的属性和对象，简化了代码的书写和阅读。

在矩形元素的内部，定义了一个文本输入框（TextInput），设置了它的id、填充锚点、边距、焦点和默认的提示文本等属性。

总的来说，该代码段实现了一个带有别名属性的矩形和文本输入框，使得可以更方便地访问和操作文本输入框的属性。

QML语法子文件 TTextEdit.qml

import QtQuick 2.0FocusScope {width: 96; height: 96Rectangle {anchors.fill: parentcolor: "red"border.color: "black"border.width: 5}property alias text: input.textproperty alias input: inputTextEdit {id: inputanchors.fill: parentanchors.margins: 4color: "white"focus: true}
}

代码中的每句语法的解释如下：

import QtQuick 2.0：导入QtQuick 2.0模块，这是使用Qt Quick构建用户界面的模块。这里将其导入到当前QML文件中。
FocusScope：创建了一个焦点范围元素。焦点范围用于管理和控制在其中的元素之间的焦点顺序。
width: 96; height: 96：设置FocusScope元素的宽度和高度为96。
Rectangle：创建了一个矩形元素。
anchors.fill: parent：将该矩形元素的边缘与父元素（即FocusScope）的边缘对齐，使得它的大小与父元素相同。
color: "red"：设置矩形元素的颜色为红色。
border.color: "black"：设置矩形元素的边框颜色为黑色。
border.width: 5：设置矩形元素的边框宽度为5。
property alias text: input.text：创建一个别名属性text，使得可以通过text属性直接访问input元素的text属性，简化了代码的书写和阅读。
property alias input: input：创建一个别名属性input，使得可以通过input属性直接访问input元素本身，简化了代码的书写和阅读。
TextEdit：创建了一个文本编辑器元素。
id: input：给该文本编辑器元素设置了一个id，方便在其他地方引用。
anchors.fill: parent：将该文本编辑器元素的边缘与父元素（即矩形）的边缘对齐，使得它的大小与父元素相同。
anchors.margins: 4：设置文本编辑器元素与父元素的边缘间隔为4，即在父元素之内留有一定的空隙。
color: "white"：设置文本编辑器元素的文字颜色为白色。
focus: true：设置文本编辑器元素的焦点为true，即默认情况下获得焦点。