Qt用户界面设计概要.ppt

三十六、QtDeclarative模块 Qt Quick由三部分组成，前面我们已经讲了Qt Quick Designer和 QML，这一节我们讲述QtDeclarative模块。我们在帮助中查找 QtDeclarative Module关键字。这里列出了该模块的所有相关类。 应该说明这个模块中的类是Qt新加的标准C++类，不是QML元素。 这个模块的作用就是将QML元 素与以前的标准C++类相结合。 而且它提供了一个很简单的方 法使新建的QML文件作为一个 项目加入到以前的图形视图的 应用中。下面我们来看一个简 单的例子。 1.我们新建Empty Qt Project ，工程名为“myDeclarative”。然后添加一个C++ Source File ，命名为main.cpp 。 2.我们在工程文件myD中添加一行代码：QT += declarative 表明使用了QtDeclarative模块。 3.我们更改main.cpp的内容如下。 #include QtDeclarative/QDeclarativeView #include QtDeclarative/QDeclarativeItem #include QtDeclarative/QDeclarativeEngine #include QtDeclarative/QDeclarativeComponent #include QtGui int main(int argc, char** argv) { ??? QApplication app(argc,argv); ??? QDeclarativeEngine engine; ??? QDeclarativeComponent component(engine,QUrl(“main.qml”)); ??? QDeclarativeItem *item = qobject_castQDeclarativeItem *(component.create()); ??? QDeclarativeView *view = new QDeclarativeView; ??? QGraphicsScene *scene = new QGraphicsScene; ??? view-setScene(scene); ??? scene-addItem(item); ??? view-show(); ??? return app.exec(); } 我们先更改代码如下： BorderImage { ??????? id: borderimage1 ??????? horizontalTileMode:BorderImage.Repeat ??????? verticalTileMode:BorderImage.Repeat ??????? border.bottom:30;border.top:30;border.right:30;border.left:30 ??????? anchors.fill:parent ??????? source: “colors.png” } 这时运行程序，效果如下： 我们更改平铺方式： horizontalTileMode:BorderImage.Round verticalTileMode:BorderImage.Round 再次运行程序，效果如下： 我们再次更改平铺方式： horizontalTileMode:BorderImage.Round verticalTileMode:BorderImage.Repeat 效果如下： 结论 使用边界图片，我们需要先指定四条边界线，然后指定水平和竖直方向的平铺方式。 图片被四条边界线分为9个区域： 区域5会通过horizontalTileMode和verticalTileMode进行平铺。 区域2,8会通过horizontalTileMode进行平铺。 区域4,6会通过verticalTileMode进行平铺。 区域1,3,7,9的图像不会变化。 三十四、Flipable、Flickable和状态与动画 这一节中我们再次讲解一下QML中状态和动画的知识，然后讲解两 个特效：Flipable翻转效果和Flickable弹动效果。 我们先新建一个Qt QML Application工程，命名为myAnimation。 一、状态与动画 在QML中提供了多个实用的动画元素。其 列表如图 下面我们进行简单的讲解。 1.PropertyAnimation 属性动画。 列表中的NumberAnimation 数值动画，ColorAnimation颜色动画和RotationAnimation旋转动画都继承自PropertyAnimation。 例如将