qml

本文介绍的是QML Flipable、Flickable和状态与动画，我们以前接触过QML组件，和一些QML相关的内容，那么本文介绍的内容就很明了了。先来看内容。 AD： 51CTO 网+ 第十二期沙龙：大话数据之美_如何用数据驱动用户体验 QML Flipable、Flickable和 状态 与 动画 是本文要介绍的内容，在接触 QML 的时候，在前面的例子中我们已经多次提到过 状态 State了，在这一节中我们再次讲解一下 QML 中 状态 和 动画 的知识，然后讲解两个特效：Flipable翻转效果和Flickable弹动效果。我们先新建一个Qt QML Application工程，命名为“myAnimation”。本文分为上下篇为大家介绍。 一、状态与动画 在QML中提供了多个实用的动画元素。其列表如下。 下面我们进行简单的讲解。 1.PropertyAnimation 属性动画。 列表中的NumberAnimation 数值动画，ColorAnimation颜色动画和RotationAnimation旋转动画都继承自PropertyAnimation。 例如将程序代码更改如下： import Qt 4.6 Rectangle { width: 300;height: 200 Rectangle{ id:page; width:50; height:50 x:0; y

经过前面两个教程，文字也能显示，也能处理鼠标事件了，来点动画吧。 这个教程实现了当鼠标按住的时候，Hello,World从顶部到底部的一个旋转过程，并带有颜色渐变的效果。 完整的源代码main.qml import Qt 4.7 Rectangle { id: page width: 500; height: 200 color: "lightgray" Text { id: helloText text: "Hello World!" y: 30 anchors.horizontalCenter: page.horizontalCenter font.pointSize: 24; font.bold: true MouseArea { id: mouseArea; anchors.fill: parent } states: State { name: "down"; when: mouseArea.pressed == true PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" } } transitions: Transition { from: ""; to: "down"; reversible: true ParallelAnimation { NumberAnimation

　　Qml里面布局主要有两种，锚点布局、Grid布局。 　　锚点布局使用anchors附件属性将一个元素的边定位到另一个元素的边，从而确定元素的位置和大小。下面是示例 1 import QtQuick 2.3 2 import QtQuick.Window 2.0 3 4 Window { 5 id:anchorLayoutWindow; 6 width: 480; 7 height: 320; 8 title: "AnchorLayout"; 9 10 Rectangle{ 11 id:rect1; 12 width: parent.width; 13 height:50; 14 color:"blue"; 15 anchors.top: parent.top; 16 Text{ text: "Top"; anchors.horizontalCenter: parent.horizontalCenter;anchors.top:parent.top; color:"white"; } 17 } 18 19 Rectangle{ 20 id:rect2; 21 width: parent.width/4; 22 color: "red"; 23 anchors.top:rect1.bottom; 24 anchors.bottom: rect4.top 25 anchors

附网址： http://qt-project.org/doc/qt-5/qmlapplications.html 假设你对Qt的官方demo感兴趣，能够參考本博客的另一个系列 Qt5官方demo解析集 每一个绿色字体均是一篇博文连接。请收藏本文，本文会持续更新 。 QML Applications —— QML应用程序 QML是一种声明式语言。它提供了一组接口用来描写叙述可视化组件以及他们之间的互动。它是一个高度可读的语言，而且被设计成使组件以一个动态的方式相互连接。同一时候它使组件非常easy被复用以及创建定制的用户界面。使用QtQuick模块，设计者和开发人员能够非常easy使用QML建立带有流畅动画的用户界面，并将这些界面连接到后端的C++库上面。 What is QML? QML是一个用户接口规范和编程语言。 它同意开发人员和设计者创建高性能的。流畅的动画和视觉效果的应用。QML提供了一个高度可读的。声明式的，相似JSON语法的。并支持与JavaScript表达式相结合来达到动态属性的绑定。 Qt QML 版块具体介绍了QML语言及其基础，关于QML语言深入的信息，请參阅 Qt QML 版块文档。 下面页面包括很多其它QML信息： First Steps with QML —— 随着这些样例開始使用QML The QML Reference —— QML结构和功能參考

一、概括 学习qt已有2年多的时间，从qt4.7开始使用直到现在正在使用的qt5.6，基本都在windows机器上做开发。最近有意向看了下qt的qml部分，觉着还是挺不错的，毕竟可以做嵌入式移动端产品的部分，还是值的一学。后来在网上看了一些资料，算是初步了解了下qml，所以想就自己学习的过程做以记录，也方便自己理解，如果你有机会看到这篇文章，那么我认为你也是来学习qml的，如果你已经是一个有很强qml开发经验的老手，那么这篇文章和接下来的qml学习系列的文章你都不用看下去了，呵呵。。。 关于qml的由来，个人觉着 Qt的Script、Quick、QML的关系与总结 讲的不错，有兴趣的同学可以去看下。 qml的学习过程我主要是以 Qt 学习之路 2 博客和 QmlBook-In-Chinese 这本书为主，同时在做小示例的时候查阅帮助文档。每个人的学习方式都不太一样，如果你有更好的办法可以留言。 二、效果预览 如下有4张效果图，分别是4个小示例，关于demo后续章节会有解说，但是都是以代码中的注解为主，有兴趣的同学也可以直接下载示例程序，使用qt提供的qmlscene.exe来直接执行qml文件，或者qmlviewer.exe也可以预览qml文件。 图1 转动的组件 图2 红绿灯1 图3 红绿灯2 图4 GridView使用 三、学习qml必备 基本元素 组件，基本元素的复合 定位器