Qt Quick快速入门(下) 02

Quick基本元素

1. 响应按键

前面提到Item可以处理按键，所有从Item继承的元素都可以处理按键，比如Rectangle、Button。
Item通过附加属性Keys来处理按键。Keys对象是Qt Quick提供的、专门供Item处理按键事件的对象。它定义了很多特定按键的信号，如returnPressed，还定义了普通的pressed和released信号。
这里举一个简单的例子，监测Escape和Back键使退出应用，监测到数字键时，就通过Text来显示对应的数字。

import QtQuick 2.2

Rectangle {
	width: 300;
	height: 200;
	color: "blue";
	focus: true;
	Keys.enable: true;
	Keys.onEscapePressed: Qt.quit();
	Keys.onBackPressed: Qt.quit();
	Keys.onPressed: {
		switch(event.key){
		case Qt.Key_0:
		case Qt.Key_1:
		case Qt.Key_2:
		case Qt.Key_3:
		case Qt.Key_4:
		case Qt.Key_5:
		case Qt.Key_6:
		case Qt.Key_7:
		case Qt.Key_8:
		case Qt.Key_9:
			event.accept = true;
			keyView.text = event.key - Qt.Key_0;
			break;
		}
	}
	Text {
		id: keyView;
		font.bold: true;
		fond.pixelSize: 36;
		text: qsTr("text");
		anchors.centerIn: parent;
	}
}

2. Text

当不指定textFormat属性时，Text元素默认使用Text.AutoText,它会自动检测文本是纯文本还是富文本，如果你明确要显示富文本内容，则需要显示的制定textFormat属性。

import QtQuick 2.2

Rectangle {
	width: 300;
	height: 200;
	Text {
		width: 150;
		height: 34;
		anchors.centerIn: parent;
		wrapMode: Text.wordWrap;
		font.bold: true;
		fond.pixelSize: 36;
		fond.underline: true;
		text: qsTr("Hello blue Text");
		color: "blue";
		// text: "Hello Blue <font color=\"blue\">Text</fond>";
	}
}

Text元素的style属性提供了集中文字风格：Text.Outline、Text.Raised、Text.Sunken，可以是文字有点儿特别的效果。而styleColor属性可以和style配合使用（如果没有指定style，则styleColor不生效）比如style为Text.Outline时，styleColor就是文字轮廓的颜色。下面来看个简单的例子：

import QtQuick 2.2

Rectangle {
	width: 400;
	height: 300;
	Text {
		id: normal;
		anchors.left: parent.left;
		anchors.leftMargin: 20;
		anchors.top: parent.top;
		anchors.topMargin: 20;
		font.pointSize: 24;
		text: "Normal Text";
	}
	Text {
		id: raised;
		anchors.left: normal.left;
		anchors.top: normal.bottom;
		anchors.topMargin: 10;
		font.pointSize: 24;
		text: "Raised Text";
		style: Text.Raised;
		styleColor: "#aaaaaa";
	}
	
	Text {
		id: outline;
		anchors.left: normal.left;
		anchors.top: raised.bottom;
		anchors.topMargin: 10;
		font.pointSize: 24;
		text: "Normal Text";
		style: Text.Outline;
		styleColor: "blue";
	}
	
Text {
		anchors.left: normal.left;
		anchors.top: outline.top;
		anchors.topMargin: 8;
		font.pointSize: 24;
		text: "Sunken Text";
		style: Text.Sunken;
		styleColor: "red";
	}
}

需要注意的是，如果希望在有限的空间内显示一行文本，显示不下时省略处理，则可以设置elide属性。

3. Button

按钮可能是GUI应用中最常用的控件了。QML中的Button和QPushButton类似，用户点击按钮会触发一个clicked()信号，在QML文档中可以为clicked()指定信号器，响应用户操作。

要使用Button，需要引入import QtQuick.Controls 1.x

先来看一个实例，点击按钮退出应用程序。

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
	width: 300;
	height: 200;
	color: "grey";
	Button {
		text: "Quit";
		anchors.centerIn: parnet;
		onClicked: {
			Qt.quit();
		}
	}
}

现在我们来看看Button其它常用的属性。

属性	说明
checkable	设置Button是否可选。如果Button可选，checked属性则保存Button选中状态
iconName	指定图标的名字，如果平台的图标主题中存在改名字对应的资源，Button就可以加载并显示它。iconSource则通过URL的方式来指定icon的位置。iconName属性的优先级高于iconSource.
isDefault	指定按钮是否为默认按钮，如果是默认的，用户按Enter键就会触发按钮的clicked()信号
pressed	保存了按钮的按下状态
menu	允许你给按钮设置一个菜单用户点击按钮时会弹出菜单。默认是null
action	允许你设定按钮的action，action可以定义按钮的checked、text、tooltip、iconSource等属性，还可以绑定按钮的clicked信号。action属性的默认值为null
activeFocusOnPress	指定按钮被按下时是否获取焦点，默认值是false
style	用来定制按钮的风格，与它配套的有一个ButtonStyle类，允许你定制按钮的背景和文本
horrizontalAlignment	水平对齐
verticalAlignment	垂直对齐

4. ButtonStyle

该属性用于定制按钮的外观，要使用ButtonStyle，需要引入QtQuick.Controls.Styles 1.x

ButtonStyle类有background、control、label三个属性。

background属性的类型是Component，用来绘制Button的背景。label属性的类型也是Component，用于定制按钮的文本。control属性指向使用ButtonStyle的按钮对象，你可以用它访问按钮的各种状态。有关Component(组件)的概念下节将介绍。首先看一个使用Rectangle来定制按钮的背景。

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.2

Rectangle {
	width: 300;
	height: 200;
	Button {
		text: "Quit";
		anchors.centerIn: parent;
		style: ButtonStyle {
			background: Rectangle {
				implicitWidth: 70;
				implicitHight: 25;
				border.width: control.pressed ? 2: 1;
				border.color: (control.hovered || control.pressed) ? "green" : "blue";				
			}
		}
		onClicked: Qt.quit();
	}
} 

通过给style属性指定一个ButtonStyle对象来定制Button的风格。这个就地实现的ButtonStyle对象，为background属性指定一个Rectangle对象来定义按钮的背景，上述代码定义了背景的宽高，根据按钮的pressed属性（control是实际按钮的引用）来设置背景矩形的边框粗细，而边框颜色则随着按钮的hovered和pressed属性而变化。

最终的效果是：当鼠标悬停在按钮上时，边框颜色为绿色；当鼠标按下时，边框变粗且颜色为绿色。

对于ButtonStyle，如果有多个按钮同时用到，上面的方式有些繁琐了，此时我们可以使用Component在QML文档内定义一个组件，设置其id属性的值为btnStyle，然后在Button中设定style属性时直接使用btnStyle。示例代码如下;

Rectangle {
	width: 300;
	height: 200;

	Component {
		id: btnStyle;
		ButtonStyle {
			background: Rectangle {
				implicitWidth: 70;
				implicitHeight: 25;
				color: "blue";
				border.width: control.pressed ? 2: 1;
				border.color: (control.hovered || control.pressed) ? "green" : "blue";
			}
		}
	}

	Button {
		...
		style: btnStyle;
	}
	
	Button {
		...
		style: btnStyle;
	}
}

5. Image

Image控件可以用来显示图片，当然必须是qt支持的图片格式，比如JPG、PNG、BMP、GIF、SVG等等。当然，这里说的图片是静态图片，如果你要显示GIF这种格式的图片，那么只能将gif的第一帧显示出来。如果要显示动画，则可以使用AnimationedSprite或者AnimationedImage。

下面来看看Image有哪些属性

属性	说明
width	设置图片的长度（尺寸）
height	设置图片的高度（尺寸）
fillMode	可以设置图片的填充模式，他支持image.Strech（拉伸）、Image.PreserveAspectFit（等比缩放）、Image.PreserveAspectCrop（等比缩放，最大化填充Image，必要时裁剪图片）、Image.TileHorizontally（水平平铺）、Image.Pad（保持图片鸳鸯不做变换）等模式。
status	图片状态，如该值为Image.Ready时再隐藏加载等候界面
asynchronous	设置该属性为true来开启异步加载模式
source	属性类型是URL，可以接受Qt支持的任意一种网络协议，比如http、ftp等。

下面通过一个实例，来熟悉下这些属性怎么用。

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
	width: 300;
	height； 200；
	color: "#121212";

	BusyIndicator {
		id: busy;
		running: true;
		anchors.centerIn: parent;
		z: 2;
	}
	Text {
		id: stateLabel;
		visible: false;
		anchors.centerIn； parent;
		z: 3;		
	}

	Image {
		id: imageViewer;
		asynchronous: true; // 异步加载图片（对于网络资源，这个属性不起作用，只有想异步加载本地资源时踩需要设置它）
		cache: false; // 不用缓存图片
		anchors.fill: parent;
		fillModel: Image.PreserveAspectFit;// 设置等比缩放模式
		
		onStatusChanged: {// onStatusChanged是信号处理器，Image的status属性变化时会发射StatusChanged()信号
			if (imageViewer.status === Image.Loading) {
				busy.running = true;
				stateLabel.visible = false;
			} else if (imageViewer.status === Image.Ready) {
				busy.running = false;
			} else if (imageViewer.status === Image.Error) {
				busy.running = false;
				stateLabel.visible = true;
				stateLabel.text= "ERROR";
			}
		}
	}
	
	Component.onCompleted: {
		imageViewer.source = "https://mp.csdn.net/mdeditor/99100191/pictures/111122122.png";
	}
}

6. BusyIndicator

BusyIndicator用来显示一个等待图元，在进行一些耗时操作时可以使用它来缓解用户的焦躁情趣。
BusyIndicator的running属性是个布尔值，为true时显示。style属性允许你定制BusyIndicator。

BusyIndicator {
	id: busy;
	running: true;
	anchors.fill: parent;
	z: 2;
}

虽然BusyIndicator只有running和style两个属性，但它的祖先属性有很多，上面用到的anchors和z，都是从Item继承而来的属性，可以直接使用。