当前位置：首页 > article >正文

QT中QML例程-学习笔记-语法

article 2024/11/5 7:40:13

官方地址：QML参考

QML 是一种用于创建高度动态应用程序的多范式语言。使用 QML，可以声明应用程序构建块（如 UI 组件），并设置各种属性来定义应用程序行为。应用程序行为可以通过 JavaScript 进一步编写脚本，JavaScript 是该语言的一个子集。此外，QML 大量使用 Qt，它允许直接从 QML 应用程序访问类型和其他 Qt 功能。
QML界面渲染之类的比较全面，QWidget在大型工程中性能比较强；
导入语句：
QML 文档在文件顶部可能有一个或多个导入。导入可以是以下任何一项：
QML 模块
一个相对目录，其中包含作为 QML 文档的类型定义
一个 JavaScript 文件
JavaScript 文件导入在导入时必须经过限定，以便可以访问它们提供的属性和方法。
各种导入的通用形式如下：
import [<Version.Number>] [as ]
import “”
import “” [as ]
例子：

import QtQuick 2.0
import QtQuick.LocalStorage 2.0 as Database
import "../privateComponents"
import "somefile.js" as Script

对象声明：对象声明由对象类型的名称组成，后根一组大括号，然后所有属性和子对象都在这些大括号中声明。例如以下定义属性为一个红色填充宽高均为100的矩形：

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" }
    }//相当于一个子对象，子对象下有GradientStop的两个子对象
}

import QtQuick 2.0
Rectangle {
    width: 200
    height: 200
    color: "red"
    Text {
        anchors.centerIn: parent//Text中使用可视父级，就是说Text在主界面显示
        text: "Hello, QML!"
    }
}

注释还是\或者/**/
QML对象属性：
id属性：每个QML对象类型都只有一个id属性，可将值分配给对象实例的id属性以允许其他对象标识和引用该对象，必须以小写字母或下划线开头，并且不能包含字母、数字和下划线以外的字符。
Property属性：Property是对象的一个属性，可以为其分配静态值或绑定到动态表达式，其值可由其他对象读取或修改。
定义Property属性：
[default] [required] [readonly] property
属性名称必须以小写字母开头并只能包含字母、数字和下划线；
以下对象声明定义了一个派生自Rectangle基类型的新类型，它有两个新属性，并为其中一个新属性实现了信号处理程序：

Rectangle {
    property color previousColor
    property color nextColor
    onNextColorChanged: console.log("The next color will be: " + nextColor.toString())//其中声明自定义属性会隐式地为该属性创建一个值更改信号，一个一个名为on<PropertyName>Changed的关联信号程序，OnNextColorchanged中的NextColor即为Property属性名称，第一个字母大写
}

Item {
    property int someNumber
    property string someString
    property url someUrl
}//以上均为有效属性声明
//任何QML对象类型都可以用作属性类型
property Item someItem
property Rectangle someRectangle

6.var类型是一种泛型占位符类型，它可以保存任何类型的值，包括列和对象，例如：

property var someNumber: 1.5
property var someString: "abc"
property var someBool: true
property var someList: [1, 2, "three", "four"]
property var someObject: Rectangle { width: 100; height: 100; color: "red" }

**
6. 为Property属性配值：
**
初始化时为Property赋值： :
也可以将初始化赋值与对象声明中的属性定义结合使用：[default] property :
例如：import QtQuick Rectangle { color: "red" property color nextColor: "blue" // 初始化示例 }
7. 命令式值分配：[.] = value
示例如下：

import QtQuick
Rectangle {
    id: rect
    Component.onCompleted: {
        rect.color = "red"
    }
}

静态值和绑定表达式值：
|静态值|一个一个不依赖于其他属性的常量值 |
|–|–|
|绑定表达式|描述属性与其他属性的关系 |
对象列表类型：定义对象列表值的语法是用方括号括起来的逗号分隔列表：[ <item 1>, <item 2>, … ]
例如该类型具有一个用于保存类型对象列表的属性，以下将此属性的值初始化为包含三个对象的列表：

import QtQuick
Item {
    states: [
        State { name: "loading" },
        State { name: "running" },
        State { name: "stopped" }
    ]
}//单个项目初始化可以省略[]

可使用以下语法在对象声明中指定type属性：
[default] property list<> propertyName
其他属性声明一样，属性初始化可以与具有以下语法的属性声明结合使用：
[default] property list<> propertyName:
list属性声明示例如下：

import QtQuick
Rectangle {
    // 声明未初始化
    property list<Rectangle> siblingRects
    // 声明时初始化
    property list<Rectangle> childRects: [
        Rectangle { color: "red" },
        Rectangle { color: "blue"}
    ]
}

分组属性：某些情况下，属性包含子属性的逻辑组，可使用点表示法或组表示法为这些子属性分配

Text {
    //点表示法
    font.pixelSize: 12
    font.b: true
}
Text {
    //组表示法
    font { pixelSize: 12; b: true }
}

属性别名：保存对另一个属性引用的属性，属性别名将新声明的属性作为对现有属性的直接引用连接起来：[default] property
alias : 别名具有以下限制：只能引用声明别名的类型范围内的对象或对象的属性；
不能包含任意JavaScript表达式；不能引用在其类型范围之外声明的对象；别名引用不可选；不能引用附加属性；
不能引用深度为3或更大层次结构中的属性
例如：

property alias color: rectangle.border.color
Rectangle {
    id: rectangle
}//两层深度

// Button.qml
import QtQuick
Rectangle {
    property alias buttonText: textItem.text
    width: 100; height: 30; color: "yellow"
    Text { id: textItem }
}//此类型具有别名属性，该属性连接到Text子对象：ButtonbuttonTexttext

Button { buttonText: "Click Me" }//为子对象创建一个具有已定义文本字符串的Button;

属性别名的注意事项

Rectangle {
    id: coloredrectangle
    property alias color: bluerectangle.color
    color: "red"
    Rectangle {
        id: bluerectangle
        color: "#1234ff"
    }
    Component.onCompleted: {
        console.log (coloredrectangle.color)    //打印 "#1234ff"
        setInternalColor()
        console.log (coloredrectangle.color)    //prints "#111111"
        coloredrectangle.color = "#884646"
        console.log (coloredrectangle.color)    //prints #884646
    }
    //可访问内部属性的 internal 函数
    function setInternalColor() {
        color = "#111111"
    }
}

属性别名和类型：属性别名不能具有显式类型规范，属性别名的类型是它所引用的属性或对象的声明类型，比如通过id创建引用对象别名，并使用内联声明的额外属性则无法通过别名访问额外的属性，例子如下：

// MyItem.qml
Item {
    property alias inner: innerItem
    Item {
        id: innerItem
        property int extraProperty
    }
}//不能从此组件的外部初始化,inner只是一个

// main.qml
MyItem {
    inner.extraProperty: 5 // 错误用法
}//

如果将内部对象提取到具有专用.qml文件的单独组件中，则可以改为实例化该组件，并通过别名使用其所有属性：

// MainItem.qml
Item {
    // 现在你可以访问 inner.extraProperty，因为 inner 现在是一个 ExtraItem
    property alias inner: innerItem
    ExtraItem {
        id: innerItem
    }
}
// ExtraItem.qml
Item {
    property int extraProperty
}