QML中的Model View——一个ListView实例

最新推荐文章于 2024-08-24 15:32:26 发布
最新推荐文章于 2024-08-24 15:32:26 发布
阅读量1.9w 收藏 13
点赞数 1
文章标签： listview delegates portability function integer qt

QML中的Model View——一个ListView实例

(2011-11-14 15:14:09)
标签：

杂谈

 

引言

Qt 中的 Model View 大家已经比较熟悉了（详情请参阅model view programming）。在QML中也有类似的模式。本文就向大家初步讲解一下 QML 中的 Model View 的用法，并提供一个 ListView 的例子程序供大家参考。


Model

Models 是用来提供数据的，它既可以以 QML 的形式出现也可以是 C++的类。QML中的Model有 ListModel、XmlListModel、 VisualItemModel；C++中的 Model 有 QAbstractItemModel、QStringList、 QList<QObject*>等。


View

View 是用来显示 Model 中的数据的，如果有 Delegates，则 View 会通过 Delegates 的帮助来显示 Model 中的每一个 Item。

QML 中有ListView, GridView, PathView, Repeater 这几种，当然大家也可以在这几种View的基础上扩展写出来自己的View。这些View都自动实现了动力滚动和弹簧效果。


Delegates

Delegates 是用来为 Model 中的每一个 Item 创建其对应的实例，并被 View 拿来做显示用的。

这里再补充一点，在大家在看诸如 ListView、GridView、PathView 这些 QML Element 的时候会发现它们都有一个叫 Highlight 的属性，它定义的是怎样对 Item 进行高亮突出显示。

其实 Highlight 和 Delegates 都是一个QML Component。我们通常会把一个 Component 写到一个 .qml 文件里（文件名第一个字母大写），从而利于程序其他地方以及日后的复用。 Highlight 和 Delegates 的作用本质都是相同的，都是为了描述如何显示 Model 中的每一块数据的，只是 Highlight 只会在 Item 在选中的情况下起作用。


例程主要代码分析

首先我们来到 main.qml 文件，这是 qml 入口文件（ ”m“是小写的，与其他大写字母开头的Component有区别）。

ListView {
id: listView
z:0
anchors.fill: parent
model: MyModel {}
delegate: myDelegate
 }

”ListView“ ：我们这里直接使用了QML ListView Element。给它一个id，为了在其他地方可以引用到它。

”model: MyModel {}“：我们用了一个 model，叫做 MyModel，它是写在一个叫 MyModel.qml 文件中的，model 的名字是由文件名决定的，model名首字母要大写 。 我们这里直接写“MyModel {} “，只要有MyModel.qml这个文件，QML engine 就会认识的。其实我们也可以不这样写，如果这个 Model 有个 id，我们直接在这里写它的 id 也可以。

“delegate: myDelegate”：myDelegate是 我们自定义的一个 Delegate 的 id。



下面我们看下 myDelegate 是如何定义的：

Component {
id: myDelegate
 //以下全部省略



然后我们继续看 myDelegate 里面还有什么：

states: [
State {
name: "Details"
PropertyChanges { target: listView; z:2}
PropertyChanges { target: background; color: "ivory" }
PropertyChanges { target: myImage; width: 180; height: 180 } // Make picture bigger
PropertyChanges { target: myContainer; detailsOpacity: 1; } // Make details visible
PropertyChanges { target: myContainer; height: listView.height } // Fill the entire list area with the detailed view
PropertyChanges { target: idTitle; color: "black" }
PropertyChanges { target: idTitle; font.pointSize: 11 }
PropertyChanges { target: topLayout; x: 10; }
PropertyChanges { target: myContainer.ListView.view; explicit: true; contentY: myContainer.y }
PropertyChanges { target:             ListView.view; interactive: false }
 },
State {
name: ""
PropertyChanges { target: listView; z:0}
PropertyChanges { target: background; color : "black"}
PropertyChanges { target: myImage; width: 47; height: 47 }
PropertyChanges { target: myContainer; detailsOpacity: 0; }
PropertyChanges { target: myContainer; height: 65 }
PropertyChanges { target: idTitle; color: "white" }
PropertyChanges { target: idTitle; font.pointSize: 9 }
PropertyChanges { target: topLayout; x: 50; }
PropertyChanges { target: myContainer.ListView.view; interactive: true }
 }]
 
transitions: Transition {
ParallelAnimation {
ColorAnimation { property: "color"; duration: 400 }
NumberAnimation { duration: 400; properties: "detailsOpacity,x,contentY,height,width" }
 }

以上这部分代码也出现在 myDelegate 中。

它定义的是两种状态，一个叫 "Details" （自己起的名字），另一个叫 ""也就是一个空的字符串，这是这个 Item 的默认状态。在这两种不同状态下，delegate 中不同对象所对应的属性值都是不同的。

当发生状态切换的时候，就会触发动画效果（由 transitions 定义），其中 contentY 的变化会使得原本列表中的一个小 Item 伸展充满整个屏幕。



最后我们来到 MyModel.qml 文件，看 model 是如何定义的：

ListModel {
ListElement {
title: "Qt"
picture: "content/pics/Qt.png"
detailstr: "<html>
<ol>
<li> Intuitive C++ class library
<li> cross-platform
<li> Integrated development tools
<li> High runtime performance
</ol>
</html>"
method: "<html> 
<ul>
<li> Qt is a cross-platform application and UI framework. Using Qt, you can write web-enabled applications once and deploy them across desktop, mobile and embedded operating systems without rewriting the source code.
<li> Intuitive C++ class library
<li> Portability across desktop and embedded operating systems
<li> Integrated development tools with cross-platform IDE
<li> High runtime performance and small footprint on embedded
</ul>
</html>"
 }
 
ListElement {
...
 //以下省略

我们这里使用了 ListModel，里面包含着一个又一个的 ListElement 作为数据 Item。这里要注意的是，我们在 Model 里面定义的属性，在 Delegate 中是可以直接访问的到的。比如在 myDelegate 中有：

Text {
text: detailstr
 //以下省略

于是这个文本就会显示 Model 中 detailstr 的具体内容。

此外，我们还可以使用 Javascript 对 Model 进行 append(), insert(), move(), remove() 等动态操作，从而实现对 Model 数据的增加删除和修改。

使用数据库存储Model数据

上面的Model数据是直接写到代码里的，但是在实际应用中我们通常会从某个地方读取数据，而不是直接写到代码里。比如我们可以把数据存到数据库里，程序启动的时候从数据库中读取数据，退出的时候把Model中的数据存放回数据库中。主要代码如下所示：

ListModel {
id: mymodel
Component.onCompleted: loadImageData()
Component.onDestruction: saveImageData()
 function loadImageData() {
 var db = openDatabaseSync("MyDB", "1.0", "My model SQL", 50000);
db.transaction(
 function(tx) {
 // Create the database if it doesn't already exist
tx.executeSql('CREATE TABLE IF NOT EXISTS Images(id INTEGER primary key, title TEXT, picture TEXT)');
 
 var rs = tx.executeSql('SELECT * FROM Images');
 var index = 0;
 if (rs.rows.length > 0) {
 var index = 0;
 while (index < rs.rows.length) {
 var myItem = rs.rows.item(index);
mymodel.append( {
 "id": myItem.id,
 "title": myItem.title ,
 "picture": myItem.picture });
index++;
 }
 } else {
mymodel.append( {
 "id": 1,
 "title": 'apple' ,
 "picture": 'content/pics/apple.png' });
mymodel.append( {
 "id": 2,
 "title": 'Qt Quick!' ,
 "picture": 'content/pics/Qt.png' });
 }
 }
 )
 }
 
 function saveImageData() {
 var db = openDatabaseSync("MyDB", "1.0", "My model SQL", 50000);
db.transaction(
 function(tx) {
tx.executeSql('DROP TABLE Images');
tx.executeSql('CREATE TABLE IF NOT EXISTS Images(id INTEGER primary key, title TEXT, picture TEXT)');
 var index = 0;
 while (index < mymodel.count) {
 var myItem = mymodel.get(index);
tx.executeSql('INSERT INTO Images VALUES(?,?,?)', [myItem.id, myItem.title, myItem.picture]);
index++;
 }
 }
 )
 }
 }

动态添加数据是非常简单的，比如我们在 onClicked 事件中可以这样做：

onClicked: mymodel.append( { "title": 'Qt', "picture": 'content/pics/Qt.png' })

删除数据：

onClicked: mymodel.remove(listView.currentIndex)

例程：Media:ListModelViewWithDatabase.zip

应用程序截图

下面是程序在N8上面的运行效果：

QMLListView1.JPG

QMLListView2.JPG

QMLListView3.JPG

QMLListView4.JPG

lixingworkCCC
关注
Qt/QML编程之路：ListView实现横排图片列表的示例(40)
码农17年的博客
01-24 822
ListView显示从内置QML类型（如ListModel和XmlListModel）创建的模型中的数据，或在C++中定义的从QAbstractItemModel或QAbstract ListModel继承的自定义模型类中的数据。ListView有一个模型和一个委托，前者定义要显示的数据，后者定义应如何显示数据。ListView中的项目是水平或垂直排列的。ListView列表，在QML中使用非常多，排列一个行，一个列或者一个表格，都会用到ListView。下面是一个垂直排列的示例：此时默认。
qml入门教程（21）：qml列表控件ListView用法介绍
琅嬛福地
12-04 1587
ListView 是 Qt Quick (QML) 中的列表控件，用于创建一个可以滚动的列表。每个列表项都是根据模型（Model）来创建的，它可以是静态的列表或者是动态的数据集合，例如从数据库中获取的数据。视图（View）将这些数据以列表的形式展现出来，而代理（Delegate）则定义了如何将每个数据项渲染到视图中。
QML中View-Model模型
guo2538377的博客
10-17 258
QML视图View与C++数据模型Model如何绑定
qml使用之ListView实例
youyudexiaowangzi的专栏
09-23 4313
效果图： 左侧的导航栏和右上角的关闭按钮只是普通的样式，中间的列表就是ListView， https://doc.qt.io/qt-5/qml-qtquick-listview.html CourseItem.qml 列表的每个item的显示 import QtQuick 2.0 import QtQuick.Layouts 1.1 Item{ id:dele...
QT Quick QML 实例之定制 TableView
最新发布
火山上的企鹅
08-24 1046
视图（如ListView）中请求模型的数据时，视图会调用 data() 函数，并传递相应的 QModelIndex 和 role， data() 函数会根据这些参数返回对应的数据。编辑数据: 当用户在视图中编辑数据（如在表格单元格中输入文本或选择复选框）时，视图会调用 setData() 函数，模型根据提供的新数据更新相应的项。：setData() 用于更新数据，而 data() 则用于获取数据。headerData() 通常与 data() 一起使用，前者用于表头的显示，后者用于表格中具体单元格的显示。
QML 模型（ListModel）
qq_45303986的博客
03-10 4208
LIstModel（列表模型）ListModel 是ListElement定义的简单容器，每个定义都包含数据角色。内容可以在 QML 中动态定义或显式定义。索引处的索引字典n从一个移动到索引索引处的。
QML-ListModel
大AI时代，人性化的信息更加难得可贵
12-12 48
1、ListElement ListElement是存储一些键值对的对象，key必须是小写字母开头，value是常量、字符串[带引号]、布尔值、数字或枚举。 2、ListModel 对ListElement的集合存储 ListModel { id: fruitModel ListElement { name: "Apple" c...
QML类型——ListView
fengyanyu68的博客
07-27 7719
正文 为列表模型(ListModel)的所有元素提供列表视图。 详细说明 ListView显示内置QML类型（例如ListModel和XmlListModel）创建的模型数据，或者使用C++定义的自定义模型类（继承QAbstractItemModel或QAbstractListModel）创建的数据。 ListView有一个Model（定义要显示的数据）和一个Delegate（定义如何显示数据）。ListView中的元素可以水平或垂直放置。列表视图本质上是可以拖动的，因为ListView继承Flickabl
第21篇 QML动态视图 之 链表视图（ListView）
Fanjufei的博客
02-09 566
目录 1、ListView（列表视图） 2、方向 3、高亮和页眉页脚 Repeater元素适合静态数据。但针对动态数据，提供如下：ListView和GridView，这两个都可以滑动。但是限制了同时实例化的代理对象。 下面讲解一下ListView（列表视图） 1、ListView（列表视图） 使用了一个model，使用delegate来实例化，在两个delegate之间能够设置间隔sapcing。 例1： import QtQuick 2.9 import QtQuick.Window.
QML中使用StackView实例
斧冰
03-21 7069
参考：https://blog.csdn.net/cqltbe131421/article/details/83148918 这个是简单的应用。 原作者在github上放上了源码，能在实际中用，方便进行子界面切换： 地址：https://github.com/cedoduarte/QML_StackView_example 上代码： main.qml文件： import QtQuick 2.9 i...
Qt/QML编程之路：一个.qml文件调用另一个.qml文件（17）
码农17年的博客
12-24 3203
比如有个main.qml和mainWidget.qml，mainWidget.qml为整个main.qml的一部分，且占满整个界面，或者说ApplicationWindow啥也没干，是个“虚”的窗口，就是把主界面MainWidget装在了进来，所有的界面组件都在MainWidget这个.qml中定义。在下面的示例中，comp1是在MyItem.qml的根上下文中创建的，从该组件实例化的任何对象都可以访问该上下文中的id和属性，如internalSettings.color。Component（组件）
QT的QML 非常好的例子
04-10
有QT 5可以运行成功的QML的界面实例 带有登陆界面和界面切换功能
一个QMLListView的例子--
abc1104332737的博客
05-12 336
一般人不知道怎么去过滤ListView里面的数据，下面是一个转载的文章：http://imaginativethinking.ca/use-qt-quicks-delegatemodelgroup/ How to use Qt Quick’s DelegateModelGroup By: Brad van der Laan, C.Tech. Jul 07 2014In this tuto...
Qt 之 Qml 中Data Models (ListModel等）
一个老菜鸟的学习分享
03-21 8053
概述 在使用qml的过程中，ListView应该是最常用的视图了，从MVC(model view control) 到现在的MVD(model view delegete),model是其中的数据载体，为视图提供数据来源，也是最核心的环节。 qml 中提供了多种Data model，本文将对其中常见的做个总结。 QML Data Models ListModel Properties count : int dynamicRoles : bool //默认是false Methods
【QML】使用 QtQuick2的ListView创建一个列表（一）
weixin_45054387的博客
09-06 529
效果还是和上面一样，因为并没有对委托delegate做修改，修改组件的显示效果也主要是对委托做修改，delegate这个属性代表ListView每一行的显示风格，可以通过自定义各种委托组件来实现各种样式的列表的效果。首先，要知道ListView提供了那些属性提供修改，那些是只读，各个属性的类型是啥，这些可用在QT的帮助文档和开发过程中使用F1键来使用帮助文档查看，都是很方便的，还有用例；
QML学习十五：ListView的简单使用（内建Model）
06-17 5091
QML
qml中ListModel使用方法
quietbxj的博客
11-25 4722
ListModel中的数据可以看作是一个Object，可以使用Object中的方法，常用方法如下图。 但在创建新的对象和添加数据时，却和常规的Object不一致，需要特殊处理，代码如下。 property var listModel: ListModel{} function testModel(){ var ob={}; ob.name = "11"; ob.age =18; ob.detail2 = {} listModel.append(ob); .
QML ListView
baidu_41388533的博客
05-30 541
QML ListView 参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd 参考：ItemDelegate QML Type import QtQuick 2.14 import QtQuick.Window 2.14 import QtQuick.Controls 2.5 import QtQuick.Controls 1.4 as Ctr_1_4 import QtQuick.Layouts 1.15 import "./common.js" as
Qt qml ListView制作单页翻页
XiaoHG_CSDN的博客
04-29 945
Qt qml ListView制作单页翻页效果：鼠标按下滑动即可切换不同页面 ListView{ anchors.fill: parent snapMode: ListView.SnapOneItem orientation: ListView.Horizontal model: ListModel{ ListElement{ name: "One"; color: "red" } ListEl
使用qml，在ListView中嵌套一个ListView
06-06
在QML中，可以使用嵌套ListView来实现多级列表的效果。下面是一个简单的示例： ```qml ListView { width: 200 height: 300 model: ListModel { ListElement { text: "Group 1"; items: ["Item 1", "Item 2", "Item 3"] } ListElement { text: "Group 2"; items: ["Item 4", "Item 5"] } ListElement { text: "Group 3"; items: ["Item 6", "Item 7", "Item 8", "Item 9"] } } delegate: Column { Text { text: model.text } ListView { width: parent.width height: 100 model: model.items delegate: Text { text: modelData } } } } ``` 在这个示例中，外层的ListView使用一个包含多个子项的ListModel作为数据模型，每个子项包含一个文本和一个子列表。每个子列表使用一个嵌套的ListView来显示其子项。 在外层的ListView的delegate中，我们使用一个Column来显示每个子项的文本和子列表。其中子列表使用一个嵌套的ListView来显示其子项，宽度设置为父元素的宽度，高度设置为100。 注意，当使用嵌套ListView时，需要格外小心，因为它们可能会导致性能问题。确保在实际使用中进行测试和优化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值