文章目录
基础语法
1.import 导入语句
//可以加入限定符,只在限定符作用域使用
import QtQuick 2.9 as CoreItems
import "../textwidgets" as MyModule
//只能包含一个根对象
CoreItems.Rectangle {
width: 100; height: 100
MyModule.Text {text: "hello"}
}
2.Loader
可以动态加载QML,可以看做是一种占位符,主要用于延迟组件的创建。
它是一个焦点作用域,要使任何子项目获得活动焦点,则必须将Loader的focus属性设置为true,任何被加载的项目获得的键盘事件都需要设置accepted为true,从而使他们不会传播到父项目中和Loader中。
一、类型
- 基本类型
- QML 对象类型
Window 和 Text 都是对象类型。
1.Item:是所有可视化类型的基类型,叫做根对象或者根项目。常用于对项目进行分组。其有一个堆叠属性z,默认值为0,值越大,就是在最上面绘制。如果子对象z属性是负数,则会绘制在父对象的下面。
2.Component对象类型,内部只能包含一个根对象,根对象也不会直接显示,在需要时才会加载,这个类型一般用于为视图提供图形组件
- JavaScript 类型
二、对象
当对象类型被实例化以后,就被叫做该对象类型的对象,总而言之,对象类型后面添加 {} 后就被称为对象。对象包含好多个特性,如id、属性、信号、信号处理器、方法、附加属性和附加信号处理器、子对象。
1.id
一个对象一般都会在开始的时候,指定一个id的值,这个id值在其他对象中识别并引用该对象,id 值必须使用小写字母或者下划线开头,并且不能使用字母、数字和下划线以外的字符,其值在一个组件的作用域中必须是唯一的。
id 看起来像是一个属性,但 id 并不是一个属性。例如上文代码中Text 对象的 id 为 name,所以可以在其他对象中通过 name.text 来获取 Text 对象中的 text 属性的值, 但无法通过name.id 来获取 id 的值。
2.属性(property)
属性是对象的特性之一,可以是一个静态值或者是一个动态表达式。可以自定义属性
property int someNumber
//var也可以当做属性类型,是一种通用的占用符,可以包含任意类型的值
property var someNumber: 1.5
property var someBool: true
property var someList: [1, 2, "three"]
//对象类型也可以作为属性类型
property Rectangle someRectangle
//只读属性,必须初始化,不允许为默认属性,不允许有别名
readonly property var someNumber: 1.5
//对象列表属性
//只声明,不初始化
property list <Rectangle> myRect
//声明并初始化
property list <Rectangle> myRect: [
Rectangle { color: "red"},
Rectangle { color: "blue"},
]
//属性别名,可以与现有属性同名,但是会被覆盖
//作用:子对象设置属性别名后,组件使用者可以在外部使用,从而解决了子对象的封装问题,又将有用的属性暴露出来。
property alias color: otherObject.color
color: "red"
3.信号和信号处理器特性
- 信号定义:
//小括号可以省略
signal hovered()
signal actionPer(string action, var actionResult)- 信号处理器
对应信号发射时,信号处理器会被QML引擎自动调用
4.方法特性 function
Rectangle {
id: rect
function calculateHeight() {
console.log("进入函数")
return rect.width / 2
}
width: 200; height: calculateHeight()
}
5.附加属性和附加信号处理器
附加属性,例如ListView类型包含一个附加属性ListView.isCurrentItem,可以附加到ListView的每一个委托对象。
ListView {
model: 3;
delegate: Rectangle {
id: delegateItem
width: 100; height: 100
color: ListView.isCurrentItem ? "red" : "yellow"
Rectangle {
id: rect
width: 100; height: 100
//附加属性只是附加到了根委托对象,而不使委托对象的子对象,所以可以用根委托对象去访问
//color: ListView.isCurrentItem ? "red" : "yellow" 错误
color: delegateItem.ListView.isCurrentItem ? "red" : "yellow" //正确
}
}
}
附加信号处理器,例如,Component,用于在组件创建完成时,执行一些JS代码
Component.onCompleted: {
console.log("构建完成")
}
6.枚举
//Move.qml
Text {
enum TextType {
Normal,
Heading
}
property int textType: Move.TextType.Heading
}
四、注释
- 单行注释
“ // ” 开始 - 多行注释
/*开始,以 */ 结尾
五、锚布局(anchors)
这是qml中布局的一种方法,可以在一个部件的上、下、左、右、水平居中、垂直居中、中心等位置进行锚定。
- Column
- Row
- Grid
- Flow
六、交互
可以通过MouseArea,表明需要监视对象的范围,在通过onClicked:{} 来执行想要进行的操作。
七、调试输出
将需要的信息输出到控制台。注意需要将console写在函数里面或者信号处理器里面。
console.log、console.debug、console.info、console.warn、console.error
- 参考代码
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Text {
id: name
text: qsTr("你好 世界!")
anchors.centerIn: parent
Rectangle {
id: colorRect
width: 20 * 2
height: width
radius: 20
color: "green"
//在name对象的右边
anchors.left: name.right
//绿色圆形左侧的边距为10
anchors.leftMargin: 10
//name对象的垂直中心
anchors.verticalCenter: name.verticalCenter
MouseArea {
//MouseArea填充整个父对象(绿色圆形)
anchors.fill: parent
onClicked: {
//绿色圆形点击后,输出控制台
console.debug("colorRect: ", parent.color)
}
}
}
}
}