QML 基本的属性类型
1.
QML 基本可视元素Item
QML中所有的可视项目都集成自Item
默认属性children和resource
属性opacity： 用来设置透明度，
属性z： 表示兄弟项目的显示层次
定位子项目和坐标映射： childAt( real x, real y ) 返回在点(x,y)处的子项目，如果没有项目则返回null
mapFromItem( Item item, real x, real y ) 函数会将item坐标体系中的点（x,y )映射到该项目的坐标系统中，返回一个包含映射后的x和y属性的对象
mapToItem( Item item, real x, real y ) 用法类似
Rectangle
矩形框，类似窗口的概念
Text
一个Text项目可以显示纯文本和富文本
TextEdit 文本编辑区或者叫输入框
TextInput 多行文本输入框
基本数据类型
* int、real、bool、string和color
* action、date、enumeration、font
* point、time、variant、vector3d
2. 属性更改通知
当一个属性更改值时，会发送一个信号通知更改。要获取这个信号，就需要创建一个信号处理器
格式："on<Property>Changed"
如:
Rectangle {
width: 100; height: 100
onWidthChanged: console.log("Width has changed to:",width)
onColorChanged: console.log("Color has changed to:",color)
}
3. 列表属性
列表属性格式：
Item {
children: [
Image { id: child1 },
Text { id: child3 }
]
Component.onCompleted: {
console.log( "Width of child rectangle:", children[1].width )
}
Component.onCompleted会在组建创建完成时执行
4. 默认属性
如：
State {
changes: [
PropertyChanges { },
PropertyChanges { }
]
}
由于changes是State类型的默认属性
State {
PropertyChanges { }
PropertyChanges { }
}
5. 分组属性
Text {
font.pixelSize: 12
font.bold: true
}
也可以写成
Text {
font { pixelSize: 12; bold: true }
}
6. 附加属性
一些对象附加属性到其他的对象上。
Component {
id: myDelegate
Text {
text: "Hello"
color: ListView.isCurrentItem ? "red" : "blue"
}
}
ListView {
delegate: myDelegate
}
ListView元素会附加ListView.isCurrentItem属性到它的每个delegate(委托)上
另一个例子就是Keys元素附加属性到任何可见的Item上来处理键盘按下：
Item {
focus：true
Keys.onSelectPressed: console.log("Selected")
}
QML在组建中添加属性
[default] property <type> <name>[: defaultValue]
例子：
import QtQuick 1.0
Item {
id: item
property string currentImage: "default-image.png"
width: 200; height: 200
Image { source: item.currentImage }
}
支持的属性类型： int、bool、double、real、string、url、color、date、variant
属性别名：
例子：
import QtQuick 1.0
Item {
id: item
property alias currentImage: image
width: 200; height: 200
Image { id: image }
}
import QtQuick 1.0
ImageViewer {
id: viewer
currentImage.source: ".../logo.png"
currentImage.width: width
currentImage.height: height
currentImage。fileMode: Image.Tile
Text { text: currentImage.source }
}
在组建中添加函数和信号
1. 添加函数
function <name>([<parameter name>[,...]]) { <body> }
ex:
Rectangle {
id: rect
width: 100; height:100
function say(text) {
console.log("You said: "+text);
}
MouseArea {
anchors.fill: parent
onClicked: rect.say("Mouse clicked")
}
}
2. 添加信号
Item {
signal clicked
signal hovered()
signal performAction(string action,variant actionArgument)
}
对应信号处理器
onClicked
onHovered
onPerformAction
ex:
onClicked: rect.buttonClicked()
onButtonClicked: console.log("Mouse was clicked")
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
