Qt_Quick开发实战精解
在QML 中，一个用户界丽被指定为一个拥有属性的对象
树.这里各种各样的对象被通称为元素
对象和属性：
属性： 值
对象标识符： id值 是一个特殊的值 小写或者下划线
表达式：
JavaScript
Item {
width: 32*100
height: 53+ 22
}
表达式中可以包含其他的对象和属性的引用
根元素：最外层的元素
HTML 标签来改变字体的大小
Text {
text: "<h2> Hello World </h2>";color: "darkgreen"
x:100
y: 100
}
当前目录下包含的文件
Project {
QmlFiles {
directory: "."
}
JavaScriptFiles {
directory: "."
}
ImageFiles {
directory: "."
}
}
基本属性类型： int real bool string color action date double enumeration font list point rect size string time url variant vector3d
属性值更改时会发出一个信号： 捕获信号 需要创建一个信号处理器 （singal handle ） 使用 on<Property>Changed 示例：
Window {
visible: true
Rectangle{
width: 100
height:100
anchors.fill: parent
onWidthChanged: console.log("width changed") //当窗口改变时 输出信息
onHeightChanged: console.log("height changed")
}
}
列表属性： 包含在方括号中 用逗号分开 可以用条目索引 “listName[index]”
Item {
children : [
Image{},
Text {}
]
Componet.onCompleted:
{ //用index 索引
console.log("width of child rectangle:",children[1].width)
}
}
默认属性：每一个对象类型都可以指定它的列表中的一项或者一个对象属性作为它的默认属性
分组属性：
Text{
font.pixelSize: 12
font.bold: true
}
Text{
font {pixelSize: 12;bold: true}
}
附加属性
一些对象附加属性到其他对象上
Componet{
id: myDelegate
Text {
text: "Hello"
color: ListView.isCurrentItem ? "red": "Green"
}
}
ListView{
delegate: myDelegate //委托到 myDelegate ListView元素会附加ListView.isCurrentItem 属性到他的每个delegate
}
属性绑定：
一个属性的值声明式表示方法
Rectangle {
function calculateMyheight（）
{
return Math.max(otherItem.height, thirdItem.heiht) //求最大值
}
anchors.centerIn: parent
width: Math.min(otherItem.width,10)
height: calucaleteMyheight()
color: {if(width>10) "blue"; else "red"}
}
属性绑定：
更改绑定：
简单的复制
Component.onCompleted{
width = 13
}
明确的使用绑定元素来创建一个绑定
C++ 中暴露的属性（system.brightness） 绑定到一个qml的值
Binding{
target: system
property: "brightness"
value: slider.value
}
，一个QML
文件是自包含的， QML 不包含在将文件提交给QML 运行环挠之前对其进行修改的
预处理器。import 语句并不会包含任何代码到文件中，只是提示QML 运行环境怎
样来解析在文件中发现的类型引用。在QML 文件中的任何类型引用，例如Rectangl
e 和Text ，都是完全基于import 语句进行解析的。QML 默认不会导人任何的模
块，所以至少应该提供一个import 语句，不然没有任何的元素可以被使用。在一个
QML 文件中的每一个id 值都必须是唯一的，但是在不同的文件中可以有相同的id
值，因为id 值是在文件作用域进行解析的.
qml文件定义了一个独立的 顶级的QML组件
Rectangle {
使用属性别名 对textItem对象的text 属性重新指定了名称
property alias text: textItem.text
width: 100; height: 62
color: "blue"
Text {
id: textItem; color: "white"
}
}
---------------------没看懂-------------
内联组件：
.内联组件使用Component 元素声明，它们包含了
常规顶级组件的所有特性.组件是QML 中最重要的基本组成块之一，而且经常被
其他元素用作"工厂'
listView 元素： 使用delegate 组件作为模板来实例化条目
-----------------------------------------
向组件中添加内容：
属性：
函数：
信号：
Write QML Components: Properties Methods and Signal 关键字 在帮助中查看
定义一个新的属性：
property <type> <name>: defaultValue
属性别名：
添加函数：
QML 组件可以定义： JavaScript代码函数
function <name> (<parameter name>[....]) {<body>}
添加函数：
signal <name> [(<type><parameter name>[,...])]
Item {
signal clicked //无参信号
signal hovered() //无参信号
signal performAction(string action, variant actionArgument) //有参信号
}
添加信号后： 会自动添加信号处理器 on<SignalName>
发信号就是简单调用它
将信号关联到其他函数和信号上：
connect() 函数
关联到一个信号上的函数称为槽
Component.onCompleted: buttonClicked.connect(item.myMethod)
组件构建完成 绑定 信号到函数
function myMethod()
{
console.log("Button was clicked")
}
Row {id: row}
Component.onCompleted:{
var component = Qt.createComponent("Button.qml") //创建一个组件
for (var i = 0;i < 3;i++) //创建3个对象
{
var button = component.createObject(row) //创建一个对象
button.border.width = 1
button.buttonClicked.connect(myMethod)
}
}
Rectangle{
id: rect
signal buttonClicked(int xpos, int ypos)
width: 100
height: 100
MouseArea{
anchors.fill: parent
onClicked: rect.buttonClicked(mouse.x,mouse.y)
}
}
No plugin can open project type "application/x-qmlproject" 没有插件
将信号关联到其他函数和信号上：
Component.onCompleted: buttonClicked.connect(item.myMethod) //绑定到函数
MouseArea{
anhcors.fill: parent
Component.onCompleted: clicked.connect(item.buttonClicked)//绑定信号到信号
}
Item{
function factorial(a){
a = parseInt(a) // parseInt() 函数可解析一个字符串,并返回一个整数
if (a<=0)
return 1;
else
return a* factorial(a-1)
}
}
MouseArea{
anchors.fill: parent
onClicked: console.log(factorial(10))
}
集成JavaScript: 把功能代码独立出来 放到js文件
factorial.js
function factorial(a){
a = parseInt(a) // parseInt() 函数可解析一个字符串,并返回一个整数
if (a<=0)
return 1;
else
return a* factorial(a-1)
}
main.qml
import "factorial.js" as Mathfunction
onClicked: console.log(Mathfunction.factorial(10))
.如果JavaScript 从一个网络资源中获取，那么组件的状态会被设置
为Loading ，直到脚本被下续完毕.
指明一个特定文件是一个没有状态的库：
.pragma library
function factorial(a){
a = parseInt(a) // parseInt() 函数可解析一个字符串,并返回一个整数
if (a<=0)
return 1;
else
return a* factorial(a-1)
}
下面的代码中调用了script.js 文件中的showCalculation()，而在script. js 中又调用了factorial.js 中的factorial() 函数，这是通过使用Qt. includeO 来实现包含factorial. js 文件的:
main.qml 文件
import QtQuick 2.5
import QtQuick.Window 2.2
import "script.js" as Mathfunction
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MouseArea{
anchors.fill: parent
onClicked: {
Mathfunction.func(10)
console.log("call factorial() from QML",
Mathfunction.factorial(10))
}
}
}
script.js
Qt.include("factorial.js")
function func(value) {
console.log("call factorial() from factorical.js",factorial(value))
}
function.js
function factorial(a){
a = parseInt(a) // parseInt() 函数可解析一个字符串,并返回一个整数
if (a<=0)
return 1;
else
return a* factorial(a-1)
}
Component.onCompleted: 属性 可以用来在QML 环境完全建立以后切换到启动脚本代码
Rectangle {
function startupFunction()
{
// startup code
}
Component.onCompleted: startupFunction()
}
属性赋值 属性绑定
在启动时， 如果QML 文件包含一个外部的JavaScript 文件和"全局"代码，它会
在只包含该外部文件和这个全局对象的范围内执行.也就是说，它不会再像通常那
样访问QML 对象和属性.全局代码只访问脚本中的局部变量是允许的，下面是一
个有效的全局代码:
var colors _ [ "red","green","blue","range"]
动态对象管理：
Loader Repeater listView GridView PathView等元素都支持动态对象的管理
Qt帮助： Dynamic Object Management in QML
Dynamic Scene example 演示程序
