Qt5与QML（二）

脚本

QML和JavaScript是一对好“基友”，在JavaScript的章节里面，我们会更加深入的研究他们两者的关系，当前我们只是简单的介绍一下他们二者的关系。

Text {
	id: label
	x: 24; y: 24
	// custom counter property for space presses
	property int spacePresses: 0
	text: "Space pressed: " + spacePresses + " times"
	// (1) handler for text changes
	onTextChanged: console.log("text changed to:", text)
	// need focus to receive key events
	focus: true
	// (2) handler with some JS
	Keys.onSpacePressed: {
		increment()
	}
	// clear the text on escape
	Keys.onEscapePressed: {
		label.text = ’’
	}
	// (3) a JS function
	function increment() {
		spacePresses = spacePresses + 1
	}
}

1. 当空格键按下时，spacePress变量发生改变，引起文本改变，文本变化时，会触发他的回调函数onTextChanged，打印当前空格键按下的次数。
2. 当text元素侦测到空格键按下时，会调用increment()函数，使spacePress变量计数加1
3. JavaScript函数的定义形式function <name> (<paramters>) { ... }，这个函数用来使计数器spacePress加1，每一次spacePressed变化会导致和他绑定在一起的其他属性也发生变化，比如text

1.4.2  基础元素

部件可以被分解为可视或不可视的元素，一个可见的元素（比如Rectangle）具有几何图形，并可以呈现在屏幕区域上面；一个不可视元素（比如定时器），拥有一些一般的功能函数，通常用来操作可视的元素。

当前，我会将重点放在可视的元素上面，比如Item、Rectangle、Text、Image和MouseArea。

Item元素

群组	属性
几何位置	x和y定义左顶点的位置，width和height定义元素的宽度和高度，z决定元素的层叠顺序
布局处理	anchors（锚点）（左、右、顶、底、垂直正中、水平正中）根据他们的margins（边沿量）决定和旁边别的元素之间的位置
按键处理	开启了输入焦点的情况下，Key和KeyNavigation属性会处理按键事件
形状转变	scale和rotate会转变图形形状，transform属性会处理x,y,z三个点相对于transformOrigin位置的转变
可见	opacity控制透明度，visible设置可见与不可见，clip操作元素边界的效果，smooth提高渲染效果
状态定义	states列出所有元素支持的状态，当前state也可以作为transitions列表的动画显示效果的转变点

为了更好的理解这些不同的属性，我们会尽力介绍各个属性的背景材料，请记住这些属性，因为他们在所有的可视元素中定义和表现都是一致的。

Rectangle元素

Rectangle是从Item继承过来的，在Item的基础上添加了填充色，也让他支持了边框属性，比如border.color和border.width，如果你想创建一个圆角矩形，你可以添加radius属性即可，

除此之外，边框和背景都是支持渐变显示的。

一个渐变gradient由多个GradientStop组成，每一个都有一个位置和颜色，这个位置是相对与y轴而言的，0.0代表顶部，1.0代表的底部，颜色代表该位置点的颜色。

注意：一个Rectangle不设置宽和高的话，这个Rectangle是不可见的，造成这个的有可能是你不小心把长和宽与别的属性绑定到一起，经过复杂的逻辑，然后被设置为0；没有可能设置一个斜角的渐变，如果你一定要这样做，你最好是自己处理一张图片，然后显示这张图片，还有就是，要么你只能旋转这个Rectangle了。

Text元素

显示一个文本你可以使用text元素，他的显著特征就是他的类型是string。这个文本会根据你给的字体和文字来计算他的长和宽。字体font属性可以采用font属性组来设置，比如font.family、font.pixelSize。。。要改变字体的颜色，你只需要使用color属性即可。

Text可以根据horizontalAlignment和verticalAlignment两个属性来对齐每一个边界和中心点。进一步提高文本渲染可以使用属性style和styleColor，他可以让你对文本添加下划线，加粗，倾斜等属性。对于一个长文本，你可能需要定义一个截断点，那么，你可以使用elide属性，这个属性允许你设置截断点的位置是在你文本的左边、右边、还是中间。你将会得到一个“A very ... longer text"类似的句子，如果你不想要中间的”..."但是也想能够看到全部的文本，你可以使用wrapMode属性完成你的想法。

Text {
        width: 40; height: 120
        text: ’A very long text’
        // ’...’ shall appear in the middle
        elide: Text.ElideMiddle
        // red sunken text styling
        style: Text.Sunken
        styleColor: ’#FF4444’
       // align text to the top
       verticalAlignment: Text.AlignTop
}

一个Text元素只能显示输入的文本，他不会处理任何的北京信息，除了呈现文本意外的信息，其他的都是透明的，这也就意味着你必须要考虑到文字背景的问题。

注意：一个text元素他的宽和高是根据字符串的长度和字体的情况来设置的，如果没有设置宽和高，这个元素是不可见的，他的初始化的值会设置为0

Image 元素

Image元素是用来显示各种格式的图片（比如PNG、JPG、GIF、BMP）。（想知道所有的支持的图片格式，你需要去查阅Qt的相关文档内容），使用source属性提供一个URL路径用来设置图片所在的路径，fillMode属性可以设置图片填充方式。

注意：URL可以使用反斜杠的本地路径，也可以使用一个WEB路径；Image元素使用PreserveAspectCrop属性开启裁剪图片数据避免图片在界面之外显示。默认情况下，裁剪熟悉是关闭的（clip : false)，你必须开启裁剪属性（clip ： true），避免图片画到矩形边界。