一、理解qml模型和视图

qt的发展是迅速的,虽然在每一个release版本中或多或少都有bug,但是作为一个庞大的gui库,no,应该说是一个开发框架开说,qt已经算是做的相当好。qml部分是qt4.7的时候推出的,当时qml只是为了移动端而设计的开发语言,随着it行业的发展,桌面端也产生了一定的需求,这就使得qml也必须支持桌面端的开发。使用qml可以做出绚丽的界面,并把逻辑和界面展示分开,qml和C++就好比html和JavaScript。

qt中有大量的model/view类,视图类:QTableView、QListView和QTreeView,模型类:QAbstractTableModel、QAbstractListModel和QAbstractProxyModel,这三个模型类都是继承自QAbstractItemModel。对于qml语言来说,也有model和view,他们分别就是GridView、ListView和PathView,其中GridView和ListView在qt中都有对于的实现类,PathView是最难理解的view,也是最灵活的view,他可以做出各种各样比较绚丽的效果。

二、效果展示

这一节我们主要是说明qml中的视图类,如下效果图展示的那样,图1是用GridView实现,图2是用ListView实现,view的item项都是用代理进行绘制;图3是用PathView实现的一个效果图,类似于一个卡牌弹出弹入效果。

顺道提一嘴,qml文件都是可以使用qmlscene.exe来预览

图1 gridview效果图

图2 listview效果图

图3 pathview效果图

三、源码分析

每一个示例中都有大量的注释,具体细节可以参看注释

1、GridView增删

如图1所示,这是一个GridView的简单示例,示例完成单击Add Item按钮实现新增项,点击项实现删除等功能。

 import QtQuick 2.0

 Rectangle {
width: ;
height: ; //背景色渐变
gradient: Gradient {
GradientStop { position: 0.0; color: "#dbddde"; }
GradientStop { position: 1.0; color: "#5fc9f8"; }
} //list模型默认9项
ListModel {
id: theModel ListElement { number: ; }
ListElement { number: ; }
ListElement { number: ; }
ListElement { number: ; }
ListElement { number: ; }
ListElement { number: ; }
ListElement { number: ; }
ListElement { number: ; }
ListElement { number: ; }
ListElement { number: ; }
} //Add Item按钮
Rectangle {
anchors.left: parent.left;
anchors.right: parent.right;
anchors.bottom: parent.bottom;
anchors.margins: ; height: ; color: "#53d769";
border.color: Qt.lighter(color, 1.1); Text {
anchors.centerIn: parent; text: "Add item!";
} //点击时新增项 实现model的动态新增
MouseArea {
anchors.fill: parent; onClicked: {
theModel.append({"number": ++parent.count});
}
} property int count: ;//
} GridView {
anchors.fill: parent;
anchors.margins: ;
anchors.bottomMargin: ; clip: true; model: theModel;//绑定数据源 cellWidth: ;//设置项大小
cellHeight: ; delegate: numberDelegate;//设置绘制代理
} //自定义绘制代理
Component {
id: numberDelegate; Rectangle {
id: wrapper; width: ;
height: ; //首先是一个渐变的矩形框
gradient: Gradient {
GradientStop { position: 0.0; color: "#f8306a"; }
GradientStop { position: 1.0; color: "#fb5b40"; }
} //文本值是number的数值
Text {
anchors.centerIn: parent; font.pixelSize: ; text: number;
} //鼠标点击代理时,移除点击项
MouseArea {
anchors.fill: parent; onClicked: {
if (!wrapper.GridView.delayRemove)//是否延迟移除
{
theModel.remove(index);
}
}
} //GridView移除项 顺序动画
GridView.onRemove: SequentialAnimation {
//属性变化
PropertyAction {
target: wrapper;
property: "GridView.delayRemove";
value: true;
}
//数字动画
NumberAnimation {
target: wrapper;//目标对象
property: "scale";//执行动画的属性
to: ;//结束值
duration: ;//动画持续时长
easing.type: Easing.InOutQuad;//动画执行曲线
}
PropertyAction {
target: wrapper;
property: "GridView.delayRemove";
value: false;
}
} //GridView新增项 顺序动画
GridView.onAdd: SequentialAnimation {
NumberAnimation {
target: wrapper;
property: "scale";
from: ;//开始值
to: ;
duration: ;
easing.type: Easing.InOutQuad;
}
}
}
}
}

2、列表

如图2所示,是一个使用ListView实现的列表控件,点击列表控件中的项,可以实现最大化来展示列表的详细信息

 import QtQuick 2.0

 Item {
width: ;
height: ; //渐变别景色
Rectangle {
anchors.fill: parent;
gradient: Gradient {
GradientStop { position: 0.0; color: "#4a4a4a"; }
GradientStop { position: 1.0; color: "#2b2b2b"; }
}
} //主界面列表视图
ListView {
id: listView; anchors.fill: parent; delegate: detailsDelegate;//设置绘制代理
model: planets;//绑定数据源
} ListModel {
id: planets; ListElement {
name: "Mercury";
imageSource: "images/mercury.jpeg";
facts: "Mercury is the smallest planet in the Solar System. It is the closest planet to the sun. It makes one trip around the Sun once every 87.969 days." ;
}
ListElement {
name: "Venus";
imageSource: "images/venus.jpeg";
facts: "Venus is the second planet from the Sun. It is a terrestrial planet because it has a solid, rocky surface. The other terrestrial planets are Mercury, Earth and Mars. Astronomers have known Venus for thousands of years.";
}
ListElement {
name: "Earth";
imageSource: "images/earth.jpeg";
facts: "The Earth is the third planet from the Sun. It is one of the four terrestrial planets in our Solar System. This means most of its mass is solid. The other three are Mercury, Venus and Mars. The Earth is also called the Blue Planet, 'Planet Earth', and 'Terra'.";
}
ListElement {
name: "Mars";
imageSource: "images/mars.jpeg";
facts: "Mars is the fourth planet from the Sun in the Solar System. Mars is dry, rocky and cold. It is home to the largest volcano in the Solar System. Mars is named after the mythological Roman god of war because it is a red planet, which signifies the colour of blood.";
}
} Component {
id: detailsDelegate; Item {
id: wrapper; width: listView.width;
height: ; //列表项文本
Rectangle {
anchors.left: parent.left;
anchors.right: parent.right;
anchors.top: parent.top; height: ; color: "#333";
border.color: Qt.lighter(color, 1.2);
Text {
anchors.left: parent.left;
anchors.verticalCenter: parent.verticalCenter;
anchors.leftMargin: ; font.pixelSize: parent.height-;
color: '#fff'; text: name;//ListElement中的name
}
} //列表项图标
Rectangle {
id: image; width: ;
height: ; anchors.right: parent.right;
anchors.top: parent.top;
anchors.rightMargin: ;
anchors.topMargin: ; color: "yellow"; Image {
anchors.fill: parent; fillMode: Image.PreserveAspectFit; source: imageSource;//ListElement中的imageSource
}
} //鼠标点击列表项 进行状态前切换,
MouseArea {
anchors.fill: parent;
onClicked: parent.state = "expanded";//切换到展开状态
} //详情页展开时,文本详细信息
Item {
id: factsView; anchors.top: image.bottom;//位于放大后的图标底部
anchors.left: parent.left;
anchors.right: parent.right;
anchors.bottom: parent.bottom; opacity: ;//默认透明不显示 当点击代理项时该属性会慢慢变得可见 Rectangle {
anchors.fill: parent; gradient: Gradient {
GradientStop { position: 0.0; color: "#fed958"; }
GradientStop { position: 1.0; color: "#fecc2f"; }
}
border.color: '#000000';
border.width: ; Text {
anchors.fill: parent;
anchors.margins: ; clip: true;//可剪切
wrapMode: Text.WordWrap;//文本支持换行
color: '#1f1f21'; font.pixelSize: ; text: facts;
}
}
} //项最大化时 右上角关闭按钮
Rectangle {
id: closeButton; anchors.right: parent.right;
anchors.top: parent.top;
anchors.rightMargin: ;
anchors.topMargin: ; width: ;
height: ; color: "#157efb";
border.color: Qt.lighter(color, 1.1); opacity: ; MouseArea {
anchors.fill: parent;
onClicked: wrapper.state = "";//点击恢复到默认状态
}
} //自定义代理状态
states: [
State {
name: "expanded";
//在点击列表项后 各项属相变化 //代理高度铺满视图高度
PropertyChanges { target: wrapper; height: listView.height; }
//列表项的图标放大
PropertyChanges {
target: image;
width: listView.width;
height: listView.width;
anchors.rightMargin: ;
anchors.topMargin: //距离顶部30像素
}
//文本详细信息可见
PropertyChanges { target: factsView; opacity: ; }
//关闭按钮可见
PropertyChanges { target: closeButton; opacity: ; }
//列表项视图
PropertyChanges {
target: wrapper.ListView.view;
contentY: wrapper.y;
interactive: false
}
}
] //项变化时 过程
transitions: [
Transition {
NumberAnimation {
duration: ;
properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY";
}
}
]
}
}
}

3、卡牌效果

示例代码可以直接放在qml文件中使用qmlscene.exe来预览

 import QtQuick 2.6

 Rectangle {
id: root;
width: ;
height: ; PathView
{
anchors.fill: parent; delegate: flipCardDelegate;
model: ; path: Path{
startX: root.width / ;
startY: PathAttribute { name: "itemAngle"; value: -45.0; }
PathAttribute { name: "itemScale"; value: 0.5; }
PathAttribute { name: "itemZ"; value: ; }//属性值附加到代理上面
PathLine { x: root.width/; y: root.height*0.4; }//路径元素定义
PathPercent { value: 0.48; }//控制两个元素之间的路径所占百分比
PathLine { x: root.width/; y: root.height*0.5; }
PathAttribute { name: "itemAngle"; value: 0.0; }
PathAttribute { name: "itemScale"; value: 1.0; }
PathAttribute { name: "itemZ"; value: }
PathLine { x: root.width/; y: root.height*0.6; }
PathPercent { value: 0.52; }
PathLine { x: root.width/; y: root.height; }
PathAttribute { name: "itemAngle"; value: 45.0; }
PathAttribute { name: "itemScale"; value: 0.5; }
PathAttribute { name: "itemZ"; value: ; }
} pathItemCount: ;//可见元素数目 preferredHighlightBegin: 0.5;
preferredHighlightEnd: 0.5;
}
Component{
id: flipCardDelegate; Rectangle{
id: wrapper; width: ;
height: ;
antialiasing: true;//反锯齿 //代理背景色渐变
gradient: Gradient{
GradientStop { position: 0.0; color: "#2ed5fa"; }
GradientStop { position: 1.0; color: "#2467ec"; }
} visible: PathView.onPath;//在PathView上的项可见,不在视图上的项不可见 scale: PathView.itemScale;//缩放
z: PathView.itemZ;//z值 数值大的在上面 property variant rotX: PathView.itemAngle;//属性别名 主要是因为要在底下这个旋转过程中使用 //动画过程旋转
transform: Rotation {
axis { x: ; y: ; z: ; }//绕x轴旋转
angle: wrapper.rotX;//旋转角度
origin { x: ; y: ; }//旋转基点
}
Text{
anchors.horizontalCenter: parent.horizontalCenter;
anchors.verticalCenter: parent.verticalCenter;
text: index;
}
}
}
}

四、相关文章

  qml基础学习(一) 基础概念

如果您觉得文章不错,不妨给个打赏,写作不易,感谢各位的支持。您的支持是我最大的动力,谢谢!!! 

 

很重要--转载声明

  1. 本站文章无特别说明,皆为原创,版权所有,转载时请用链接的方式,给出原文出处。同时写上原作者:朝十晚八 or Twowords
  2. 如要转载,请原文转载,如在转载时修改本文,请事先告知,谢绝在转载时通过修改本文达到有利于转载者的目的。

qml基础学习 模型视图(一)的更多相关文章

  1. qml基础学习 Canvas画笔

    一.画布元素 自qt4.7发布qml以来,qml也在一直不断的完善中,在qt4时代使用qml时如果需要异形图,那我们只能让设计师来切图,这样的感觉是很不爽的,总感觉开发没有那么犀利.但是到了qt5这一 ...

  2. qml基础学习 基础概念

    一.概括 学习qt已有2年多的时间,从qt4.7开始使用直到现在正在使用的qt5.6,基本都在windows机器上做开发.最近有意向看了下qt的qml部分,觉着还是挺不错的,毕竟可以做嵌入式移动端产品 ...

  3. SQL基础学习_04_视图

    视图 1. 视图的创建     视图就是保存好的SELECT语句,这些SELECT语句执行之后会产生新的表,所以在SQL中,视图和表是不做差别对待的,也就是SQL也可以对视图做一些操作:     由于 ...

  4. 学习模型-视图-控制器MVC模式

    1.MVC简介 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分 ...

  5. MySQL基础学习之视图

    创建新的视图 CREATE VIEW 视图名  AS SELECT  属性,属性1,属性2  FROM 表名 创建新的视图并指定数据名 CREATE VIEW 视图名(新属性,新属性1,新属性2)   ...

  6. Qt 学习之路:模型-视图高级技术

    PathView PathView是 QtQuick 中最强大的视图,同时也是最复杂的.PathView允许创建一种更灵活的视图.在这种视图中,数据项并不是方方正正,而是可以沿着任意路径布局.沿着同一 ...

  7. OpenGL学习笔记4——模型视图变换

    以日月地为例的一个模型视图变换.绕了比较多的弯路,下面是几个注意点总结. 注意点: 1.GL函数对模型的操作是基于当前局部坐标系,即模型坐标系而非世界坐标系,二者只在第一次初始化完毕之后才重合: 2. ...

  8. Java基础之在窗口中绘图——使用模型/视图体系结构在视图中绘图(Sketcher 1 drawing a 3D rectangle)

    控制台程序. 在模型中表示数据视图的类用来显示草图并处理用户的交互操作,所以这种类把显示方法和草图控制器合并在一起.不专用于某个视图的通用GUI创建和操作在SketcherFrame类中处理. 模型对 ...

  9. WEBGL学习【八】模型视图投影矩阵

    <!--探讨WEBGL中不同图形的绘制方法:[待测试2017.11.6]--> <!DOCTYPE HTML> <html lang="en"> ...

随机推荐

  1. win下修改mysql默认的字符集以防止乱码出现

    环境:win8.1+mysql5.6.11+xampp(v3.2.1) 默认的编码如下 查看方式: show variables like 'character%'; 结果: 从以上信息可知数据库的编 ...

  2. Xamarin.Android经验之谈

    1.Fragment如何做到显示才加载数据 有些界面我们会采用套用多个Fragment来显示的效果,但是我们不会在一显示这个活动的时候就把所有的Fragment加载并加载数据,而是会让显示出来的Fra ...

  3. win7升级为Win10 10586版本,出现应用商店打不开的解决办法

    把公司的win7升级为了win10,但是打开应用商店时是白的,什么都没有,过一会之后,会有提示信息. 报的错误是: 错误代码:0X80072ee2 最后,我的解决办法是: 首先,咱们返回到win10 ...

  4. 《你必须知道的.NET》读书笔记:从Hello World认识IL

    通用的语言基础是.NET运行的基础,当我们对程序运行的结果有异议的时候,如何透过本质看表面,需要我们从底层来入手探索,这时候,IL便是我们必须知道的基础. 一.IL基础概念 1.1 什么是IL? IL ...

  5. IE浏览器不能自动显示PDF文件的解决办法

    今天更新了Adobe的PDF Reader,更新后发现在网页上无法预览PDF文件了,点击PDF的连接,浏览器就会提示下载或者打开,感觉很不爽,经过一番百度,找到了解决办法,在这里分享一下. 打开IE浏 ...

  6. 用DirectX实现魔方(二)

    这篇说一下如何构造魔方,主要包括魔方几何体的构造及纹理贴图.以下论述皆以三阶魔方为例,三阶魔方共有3 x 3 x 3 = 27个小立方体. 构造魔方 在第一篇里面说过,最初模型用的是微软的.x文件格式 ...

  7. 让C#轻松实现读写锁分离--封装ReaderWriterLockSlim

    ReaderWriterLockSlim 类 表示用于管理资源访问的锁定状态,可实现多线程读取或进行独占式写入访问. 使用 ReaderWriterLockSlim 来保护由多个线程读取但每次只采用一 ...

  8. 为 WSUS 服务器定期运行清理向导

    在 WSUS 的管理界面的 Options 里面,可以找到 Server Cleanup Wizard 然后运行.后来想了一下,为什么不把它弄成定期运行呢! 找了一下,从 Windows Server ...

  9. IBatisNet:让insert操作返回新增记录的主键值

    项目引用ibatis包: IBatisNet.Common.dll --文件版本1.6.2.0 IBatisNet.DataAccess.dll IBatisNet.DataMapper.dll 项目 ...

  10. 学习ASP.NET MVC(九)——“Code First Migrations ”工具使用示例

    在上一篇文章中,我们学习了如何使用实体框架的“Code First Migrations ”工具,使用其中的“迁移”功能对模型类进行一些修改,同时同步更新对应数据库的表结构. 在本文章中,我们将使用“ ...