QML教程（一）基础语法

标签：教程 QtQuick color 语法 width QML import Rectangle 属性

目录

一、导入

二、对象声明

 三、对象属性

1.声明对象属性

2.信号属性

3.方法属性

4.附加属性略 

5.枚举属性 

6.对象属性赋值

四、自定义对象

 

 

一、导入

• 模块导入
• 语法： import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>]
  
  例：
  import QtQuick
  
  import QtQuick 2.10
  
  import QtQuick as Quick
  
• 目录导入
• 语法： import "<DirectoryPath>" [as <Qualifier>]
  
  例：
  import "../privateComponents"
• import "../textwidgets" as MyModule
  

二、对象声明

• 对象
• 对象声明由其对象类型的名称组成，后跟一组大括号。然后，所有属性和子对象都在这些大括号内声明。例： import QtQuick 2.0
• Rectangle {
•     width: 100
•     height: 100
•     color: "red"
• }
  
• 对象树中的子对象
• 任何对象声明都可以通过嵌套对象声明定义子对象。这样，任何对象声明都会隐式声明可能包含任意数量的子对象的对象树。例： import QtQuick 2.0
• Rectangle {
•     width: 100
•     height: 100
•     gradient: Gradient {
•         GradientStop { position: 0.0; color: "yellow" }
•         GradientStop { position: 1.0; color: "green" }
•     }
• }
  
• 视觉场景中的子对象
• 视觉场景中父子关系的概念由模块中的 Item 类型提供，这是大多数 QML 类型的基本类型，因为大多数 QML 对象都是要直观呈现的。例如，“矩形”和“文本”都是基于Item的类型 import QtQuick 6.2
• Rectangle {
•     width: 200
•     height: 200
•     color: 'red'
•     data: [
•         Text {
•             anchors.centerIn: parent
•             text: qsTr("Hello QML")
•         }
•     ]
• }
• 
  
  简写形式
  import QtQuick 6.2
• Rectangle {
•     width: 200
•     height: 200
•     color: 'red'
•     Text {
•         anchors.centerIn: parent
•         text: qsTr("Hello QML")
•     }
• }
•  
• 坐标
• Qt Quick中使用的默认视觉坐标系统是项目坐标。这是一个笛卡尔坐标系，（0，0） 位于项目的左上角。x 轴向右增长，y 轴向下增长，因此项目的右下角位于坐标（宽度、高度）处。坐标数值是指在其父容器中的坐标。例： Rectangle {
•     width: 200
•     height: 200
•     color: "red"
•     Rectangle {
•         x: 100
•         y: 100
•         width: 100
•         height: 100
•         color: "blue"
•         Rectangle {
•             width: 50
•             height: 50
•             color: "green"
•         }
•     }
• }
  
  
• 堆叠
• Qt Quick 项目使用递归绘制算法来确定在发生碰撞时将哪些项目绘制在顶部。通常，项目按照创建顺序（或在 QML 文件中指定z属性：低于0的z值将堆叠在父级下方）绘制在其父项目之上。z值的越大，优先级越高，但仅限于同父级比较，如果父级优先级低于其他父级，即使子级z值极大，也不会比其他父级要高。
• 注释
• 单行注释以 // 开头，在行尾结束。
• 多行注释以 /* 开头，以 */ 结尾
• 例： Text {
•     text: "Hello world!"    //a basic greeting
•     /*
•         We want this text to stand out from the rest so
•         we give it a large size and different font.
•     */
•     font.family: "Helvetica"
•     font.pointSize: 24
• }
  
  

 三、对象属性

1.声明对象属性

除枚举类型(用int代替)之外的任何 QML 值类型都可以用作自定义属性类型

语法：

[default] [required] [readonly] property <propertyType> <propertyName>

 例：

Item {

    property int someNumber

    property string someString

    property url someUrl

    property color previousColor

    //var 值类型是一个通用占位符类型，可以保存任何类型的值，包括列表和对象

    property var someNumber: 1.5

    property Rectangle someRectangle

    states: [

        State { name: "loading" },

        State { name: "running" },

        State { name: "stopped" }

    ]

    // 如果list只有一个项，则可以省略[]

    states: State { name: "running" }

    property list<Rectangle> siblingRects

    property list<Rectangle> childRects: [

        Rectangle { color: "red" },

        Rectangle { color: "blue"}

    ]

}

分组属性

Text {

    //dot notation

    font.pixelSize: 12

    font.b: true

}

 

Text {

    //group notation

    font { pixelSize: 12; b: true }

}

 默认属性：使用default标注为默认属性，使用时可以不用声明key

// MyLabel.qml

import QtQuick 2.0

 

Text {

    default property var someText

 

    text: "Hello, " + someText.text

}

使用时，而这效果相同 

MyLabel {

    Text { text: "world!" }

}

 

MyLabel {

    someText: Text { text: "world!" }

}

 on 语法:

<PropertyModifierTypeName> on <propertyName> {

    // attributes of the object instance

}

目前有两种使用方式：

• 属性值写入侦听器
• 目前主要用于监听动画属性，例： import QtQuick 2.0
• Item {
•     width: 400
•     height: 50
•     Rectangle {
•         width: 50
•         height: 50
•         color: "red"
•         NumberAnimation on x {
•             from: 0
•             to: 350
•             loops: Animation.Infinite
•             duration: 2000
•         }
•     }
• }
  

• 属性值源

2.信号属性

信号是来自对象的通知，指示发生了某些事件：例如，属性已更改、动画已启动或停止，或者图像已下载。例如，鼠标区域类型具有当用户在鼠标区域内单击时发出的单击信号。

每当发出特定信号时，都可以通过信号处理程序通知对象。信号处理程序使用语法 on<Signal 声明>其中 <Signal> 是信号的名称，第一个字母大写。信号处理程序必须在发出信号的对象的定义中声明，并且处理程序应包含调用信号处理程序时要执行的 JavaScript 代码块。

例如，下面的 onClicked 信号处理程序是在 MouseArea 对象定义中声明的，并在单击 MouseArea 时调用，从而导致打印控制台消息：

import QtQuick 2.0

 

Item {

    width: 100; height: 100

 

    MouseArea {

        anchors.fill: parent

        onClicked: {

            console.log("Click!")

        }

    }

}

语法：

signal <signalName>[([<parameterName>: <parameterType>[, ...]])]

例：

import QtQuick 2.0

 

Item {

    // 无参数可省略括号

    signal clicked

    signal hovered()

    // 指定参数

    signal actionPerformed(action: string, actionResult: int)

}

 发出信号：

直接通过id调用信号即可

id.actionPerformed("something", 1)

处理信号：

on<Signal>：fun即可

onDeactivated: console.log("Deactivated!")

属性更改信号处理器：

on<Property>Changed

例：

import QtQuick 2.0

 

TextInput {

    text: "Change this!"

 

    onTextChanged: console.log("Text has changed to:", text)

}

 

3.方法属性

语法：

function <functionName>([<parameterName>[: <parameterType>][, ...]]) [: <returnType>] { <body> }

例1：

import QtQuick 2.0

Rectangle {

    id: rect

 

    function calculateHeight() : real {

        return rect.width / 2;

    }

 

    width: 100

    height: calculateHeight()

}

 例2：

import QtQuick 2.0

 

Item {

    width: 200; height: 200

 

    MouseArea {

        anchors.fill: parent

        onClicked: (mouse)=> label.moveTo(mouse.x, mouse.y)

    }

 

    Text {

        id: label

 

        function moveTo(newX: real, newY: real) {

            label.x = newX;

            label.y = newY;

        }

 

        text: "Move me!"

    }

}

4.附加属性

略 

5.枚举属性 

枚举提供一组固定的命名选项。它们可以使用关键字在 QML 中声明：enum

// MyText.qml

Text {

    enum TextType {

        Normal,

        Heading

    }

 

    property int textType: MyText.TextType.Normal

 

    font.bold: textType == MyText.TextType.Heading

    font.pixelSize: textType == MyText.TextType.Heading ? 24 : 12

}

 

6.对象属性赋值

• 初始化时的值赋值 <propertyName> : <value>
  
  import QtQuick 2.0
• Rectangle {
•     color: "red"
•     property color nextColor: "blue" // combined property declaration and initialization
• }
  
• 命令式值赋值 [<objectId>.]<propertyName> = value
  
  import QtQuick 2.0
• Rectangle {
•     id: rect
•     Component.onCompleted: {
•         rect.color = "red"
•     }
• }
  
  

四、自定义对象

现在我们定义一个消息框对象：MessageLabel

新建QML文件：MessageLabel.qml

// MessageLabel.qml

import QtQuick

 

Rectangle {

    height: 50

    //声明消息内容:message

    property string message: "debug message"

    //声明消息类型:msgType（debug、warning、critical）

    property string msgType: "debug"

    Column {

        anchors.fill: parent

 

        Text {

            text: msgType.toString().toUpperCase() + ":"

            font.bold: msgType === "critical"

            color: msgType === "warning" || msgType === "critical" ? "red" : "blue"

            //动画

            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" : "blue"

        }

    }

 

}

使用：

// application.qml

import QtQuick

 

Column {

    width: 180

    height: 180

    padding: 1.5

    topPadding: 10.0

    bottomPadding: 10.0

    spacing: 5

 

    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"

    }

}

 

https://blog.csdn.net/wenxingchen/article/details/128515623

 

标签：教程,QtQuick,color,语法,width,QML,import,Rectangle,属性
From： https://www.cnblogs.com/im18620660608/p/17097519.html