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 {}
]
{ //⽤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) //求最⼤值
}
width: Math.min(otherItem.width,10)
height: calucaleteMyheight()
color: {if(width>10) "blue"; else "red"}
}
属性绑定：
更改绑定：
简单的复制
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:
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() 函数
关联到⼀个信号上的函数称为槽
组件构建完成绑定信号到函数
function myMethod()
{
console.log("Button was clicked")
}
Row {id: row}
var component = Qt.createComponent("Button.qml") //创建⼀个组件
for (var i = 0;i < 3;i++) //创建3个对象
{
var button = ateObject(row) //创建⼀个对象
button.border.width = 1
t(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)
}
}
qt listviewNo plugin can open project type "application/x-qmlproject" 没有插件
将信号关联到其他函数和信号上：
anhcors.fill: parent
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)
}
Rectangle {
function startupFunction()
{
// startup code

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。