标签：qml qt quick 图形效果 graphical effects
Qt Quick 提供了 Graphical Effects ，我在《Qt Quick核心编程》一书中限于篇幅没有介绍，这里补上吧。
Graphical Effects ，姑且叫作图形效果吧。它提供了 Blend 、 Color 等好几类效果，有些类别下面又有多种不同的效果，要介绍完整需要较长的篇幅。我们一个一个来看。
博客之星评选，点击投我一票，谢谢。投过了也可以点哦，每天都可以投投一票。
先看看都有哪几类图形效果（Graphical Effects）吧：
我设计了一个示例来演示所有的图形效果，它是一个 Qt Quick App 项目。下面是示例运行后的首页：
图 1 示例首页
我们结合图 1 来介绍一下示例项目的结构。
如图 1 所示，首页中间是一个列表，列出了所有的图形效果类别。
界面底部右侧有两个按钮，“Load Examples”按钮用于加载选中的图形效果对应的示例。“Quit”就是退出了。
首页的源码在 main.qml 中：
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
Window {
id: appWin;
visible: true;
width: 640;
height: 640;
minimumWidth: 640;
minimumHeight: 640;
color: "lightgray";
property var currentExample: null;
Text {
id: clue;
text: "Graphical Effects Examples";
anchors.top: parent.top;
anchors.left: parent.left;
anchors.margins: 4;
font.pointSize: 24;
font.bold: true;
}
Rectangle{
anchors.left: clue.left;
anchors.right: parent.right;
anchors.rightMargin: 4;
anchors.top: clue.bottom;
height: 2;
border.width: 1;
border.color: "darkgray";
}
Component {
id: exampleDelegate;
Rectangle {
id: wrapper;
width: parent.width;
height: 40;
color: "transparent";
Text {
anchors.fill: parent;
text: name;
color: wrapper.ListView.isCurrentItem ? "blue" : "steelblue";
font.pointSize: 20;
verticalAlignment: Text.AlignVCenter;
}
MouseArea {
anchors.fill: parent;
onClicked: {
wrapper.ListView.view.currentIndex = index;
}
}
}
}
ListView {
id: examples;
anchors.bottom: quit.top;
anchors.top: clue.bottom;
anchors.left: parent.left;
anchors.right: parent.right;
anchors.margins: 8;
clip: true;
delegate: exampleDelegate;
highlight: Rectangle {
color: "lightblue";
width: parent.width;
}
model: ListModel {
ListElement {
name: "Blend";
example: "BlendExample.qml";
}
ListElement {
name: "Color";
example: "ColorExample.qml";
}
ListElement {
name: "Gradient";
example: "GradientExample.qml";
}
ListElement {
name: "Distortion";
example: "DistortionExample.qml";
}
ListElement {
name: "Drop Shadow";
example: "DropShadowExample.qml";
}
ListElement {
name: "Blur";
example: "BlurExample.qml";
}
ListElement {
name: "Motion Blur";
example: "MotionBlurExample.qml";
}
ListElement {
name: "Glow";
example: "GlowExample.qml";
}
ListElement {
name: "Mask";
example: "MaskExample.qml";
}
}
}
Button {
id: load;
text: "Load Examples";
anchors.right: quit.left;
anchors.top: quit.top;
anchors.rightMargin: 8;
onClicked: {
var data = examples.model.get(examples.currentIndex);
console.log("example: " , data.example);
var comp = Qt.createComponent(data.example);
if(comp.status == Component.Ready){
appWin.currentExample = comp.createObject(appWin, {"color" : appWin.color});
appWin.currentExample.back.connect(appWin.closeCurrentExample);
}
}
}
Button {
id: quit;
text: "Quit";
anchors.bottom: parent.bottom;
anchors.right: parent.right;
anchors.margins: 8;
onClicked: Qt.quit();
}
function closeCurrentExample() {
currentExample.destroy();
}
}ListView列出了所有的图形效果。
exampleDelegate 这个组件用于绘制 ListView 里的一个 Item 。它接受并处理鼠标事件，改变 ListView 的当前 Item ；也改变当前 Item 的文本显示效果。
ListModel 非常简单，只是使用 ListElement 列出了所有图形效果的名字（角色名为name）和对应的示例文档（角色名为example），在 delegate 中我们可以通过角色名访问 Model 中的数据。
这就是 ListView 了： view + model + delegate ，非常灵活。更详细的用法，可以参考我的书《Qt Quick核心编程》，里面对 ListView 有超级详细的介绍。
我给每一类图形效果提供了一个单独的演示界面，在 ListModel 内， example 这个角色保存了对应的示例 QML 文档的名字。当用户点击“Load Examples”按钮时，我获取到 ListView 的当前 Item ，通过 Model 取出数据，访问 example 角色，得到实际的 QML 文档名字，然后使用 Qt.createComponent() 和 Component.createObject() 来加载 QML 文档并生成示例组件。
好啦，这次就先介绍到这里，下一次我们介绍 混合效果。
博客之星评选，点击投我一票，谢谢。投过了也可以点哦，每天都可以投投一票。
--------
回顾一下我的Qt Quick系列文章：
Qt Quick里的图形效果（Graphical Effects）
标签：qml qt quick 图形效果 graphical effects
原文地址：http://blog.csdn.net/foruok/article/details/42619649
