QML 语法
QML结构 是基于 元素的层次结构.
每个子元素从 parent 继承位置.
Parent元素: Rectangle
Children元素: MouseArea 和 Text
chileren元素的x,y position继承自其parent元素,即x, y位置相同.
Properties
- 每个QML元素, 都有 很多元素属性(width, radius, font.pixelSize, border.width, model, delegate, etc)
- 定义 新属性: property <type> <name>: <value> Ex: property int count: 0
- QML中的类型有: var, int, real, string, bool, double, url, color, font, etc
- 声明属性的另一种方法是使用 别名alias. property alias <name>: <reference>
- alias别名属性 允许 forward 其它的属性或者object. Ex: property alias buttonText: textItem.text
Id property
- id 是element的唯一标识, 就像 object name
- id 不是必须的
- 如果想access object的properties, 则id 有用.
Positioning
- 使用x和y坐标来定位 object. 使用z来指定layout的顺序
- 使用 anchors 锚 来放置object. anchors允许以另一个element来放置一个element.
Positioning elements
- 按Row排序, 将child items 要么从左到右, 或者从右到左 一个接着一个排序; 从左到右, 或者从右到左 取决于layoutDirection 属性
Row {
spacing: 10
height: 20
Text {
text: "Label"
}
CheckBox {
checked: false
}
}
- 按Column排序, child items 从一列一个接着一个往下排.
Column {
spacing: 10
width: 200
Rectangle {
width: parent.width
height: 20
color: "red"
}
Rectangle {
width: parent.width
height: 20
color: "yellow"
}
}
- spacing 属性, 间距属性, 用来表示 chile elements之间的距离.
例子
SwitchButton.qml
import QtQuick 2.0
Item {
id: switchButton
property string leftText
property string rightText
signal leftClicked()
signal rightClicked()
onLeftClicked: {
console.log("inside");
leftButton.color = "yellow";
rightButton.color = "#FFFFFF";
}
onRightClicked: {
rightButton.color = "yellow";
leftButton.color = "#FFFFFF";
}
}
ButtonExample.qml
import QtQuick 2.8
import QtQuick.Window 2.2
Window {
id: mainView
Rectangle {
id: settingsArea
anchors.bottom: parent.bottom
width: parent.width
height: 150
color: "#39393A"
radius: 3
Column {
height: 100
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 30
spacing: 10
SwitchButton {
rightText: "Right"
leftText: "Left"
onLeftClicked: {
console.log("Outside");
circle.x = 0;
}
onRightClicked: {
circle.x = (mainView.width - circle.width);
}
}
}
}
}
SwitchButton.qml 里面的 onLeftClicked 比 ButtonExample.qml 里面的onLeftClicked 先一步执行.