QML视图组件ListView、TableView、GridView介绍

于 2025-05-29 11:07:04 发布
阅读量518 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： QML 文章标签： qt c++ qml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/new9232/article/details/148279991

1 MVD模型

  • Model：模型，包含数据及其结构。
  • View：视图，用于显示数据。
  • Delegate：代理，规定数据在视图中的显示方式。

2 ListView

  • 以列表形式展示数据。

2.1 属性

  • model：设置或获取列表视图的数据模型
  • delegate：定义了列表中每一项的外观和行为
  • currentIndex：获取或设置当前选中的项的索引
  • highlight：指定一个组件作为当前选中项的高亮显示样式
  • header：头部设置
  • footer：底部设置

2.2 示例

  • 代码 
    •   import QtQuick 2.15
了解本专栏 订阅专栏 解锁全文 超级会员免费看
QML GridView 网格视图
青春不老，奋斗不止！
03-13 1057
和 ListView 一样，GridView 也是基于 Flickable 的视图组件，它们的用法非常相似。不同的是，ListView 中的元素被存储在线性链表中，并以单列（或单行）的形式进行展示的，因此适用于垂直（或水平）列表的场景；而 GridView 中的元素则被存储在一个二维数组中，并以网格的形式进行展示的，因此更适用于具有二维结构或以网格方式呈现的场景，如相册图库、视频列表、工具导航等。
QML ListView 列表视图
青春不老，奋斗不止！
02-02 1396
虽然 Repeater 在重复创建多个相似项的时候很方便，但是通常只适用于有限的简单元素，并且它还无法滚动浏览。而基于 Flickable 的视图组件（如 GridView、ListView、TableView、TreeView 等）则弥补了这些缺点，它们不但能够显示大量数据，而且还支持滚动浏览，尤其是针对复杂的布局和交互场景，可以通过分页显示、懒加载、动态更新等手段来提高性能。
QML TableView 实例演示 + 可能遇到的一些问题（Qt_6_5_3）
遇己
11-26 1972
-
【QML Model-View】TableView 使用
m0_60259116的博客
03-06 1727
【QML Model-View】TableView 使用
Qt QML自定义LIstView
u014147126的博客
05-09 869
多个ListView组合成一个表格，实现某些列可以固定，其他列可以拖动展示的样式
QML ＜ 7 ＞ 基于ListView 实现表格显示
jiang173707的博客
02-09 2277
QML ＜ 7 ＞ 基于ListView 实现表格显示 文章目录QML ＜ 7 ＞ 基于ListView 实现表格显示前言一、实现方式二、示例1.表头2.行 Component3.列 Component总结 前言 本文记录一种基于ListView 实现表格显示的一种方式，在QML中也可直接选择TableView进行表格显示，示例程序QML ＜4＞ Tableview 自定义表格显示 一、实现方式 以行的方式去处理，每行用RowLayout布局列Component，表头和表格内同分开，ColumnLayout
QML ListView实现树形二级列表（类似 android ExpandableListView控件）
08-11
QML 中没有直接提供类似 android 的ExpandableListView二级列表控件，treeView，但是用 treeView 实在是有些不方便，并且达不到想要的效果，所以干脆用 ListView 来扩展一个。
qml ListView和TableView共用自定义滚动条
09-17
使用QML实现自定义滚动条，并作用于listView和tableView中，代码可直接通过cmd命令运行
QT5 TreeView,TableView,ListView的基本用法
02-26
这里介绍了这几个View的用法，用于入门，等基本会使用这些View以后，就可以参看帮助文档进行其他的高级的开发了
第22篇 QML动态视图 之 网格视图（GridView）
Fanjufei的博客
02-09 1858
网格视图（GridView）使用了一个二维数组来存放元素。使用单元宽度（cellWidth）与单元高度（cellHeight）属性来控制数组内的二维元素的内容。 每个元素从左上角开始依次放入单元格。 链表视图（ListView）使用线性链表来存放元素。 例： import QtQuick 2.9 import QtQuick.Window 2.2 Window { visible: true width: 800 height: 600 GridView {
qml 实现gridview带滚动条和翻页
06-21
在QML（Qt Quick）中，GridView是一种布局管理器，用于在二维网格中显示元素，通常用于创建诸如图片库、应用列表等用户界面。而在这个主题中，我们要讨论如何在GridView中添加滚动条和翻页功能，使得用户可以通过...
QmlListView控件位置定位的几个方法
12-28
笔者在开发产品过程中，ListView算是用的最多的控件之一了。ListView控件有两大要素比较重要，一是model数据，二是delegate实例。用得好这两个基本上对这一控件没什么问题了，一开始笔者也是这样想的，可是学习不同于产品的开发，客户总是有这样那样的要求要去实现。你却有不能不去做，客户经常对这产品说，这个功能不好，要这样。本文就是介绍ListView控件个性化位置设置，对于一般的控件设置它的位置是非常简单的事，设置x，y轴坐标就可以了。但是客户也不是那么容易就被解决好的。本文介绍几种方法来设置ListView控件的位置，总有一种适合你。
QML类型：ListView
热门推荐
友善啊，朋友的博客
10-14 1万+
一、描述 ListView 继承自 Flickable，用作显示来自内置 QML 类型（如 ListModel 和 XmlListModel）或从 QAbstractItemModel 或 QAbstractListModel 继承的 C++ 中定义的自定义模型类创建的模型中的数据。 二、使用示例 import QtQuick 2.12 import QtQuick.Window 2.0 Window { id:root; visible: true; width: 20.
QML类型：GridView、XmlListModel、XmlListModelRole
hw5230的博客
07-12 808
GridView 继承自 Flickable。用作显示来自内置 QML 类型（如 ListModel 和 XmlListModel）或从 QAbstractListModel 继承的 C++ 中定义的自定义模型类创建的模型中的数据。可以组合这些属性以生成各种布局。这些属性保存网格中每个单元格的宽度和高度。默认单元格大小为 100x100。此属性保存网格的流动方向。在视图中将 currentIndex 向下 / 向左 / 向上 / 向右移动一项。
QML中GridView的一些理解
刘一儿(嵌入式)
02-27 2311
学习QML中的GridView元素，对其中几项属性的理解。
QML类型——ListView
fengyanyu68的博客
07-27 8053
正文 为列表模型(ListModel)的所有元素提供列表视图。 详细说明 ListView显示内置QML类型（例如ListModel和XmlListModel）创建的模型数据，或者使用C++定义的自定义模型类（继承QAbstractItemModel或QAbstractListModel）创建的数据。 ListView有一个Model（定义要显示的数据）和一个Delegate（定义如何显示数据）。ListView中的元素可以水平或垂直放置。列表视图本质上是可以拖动的，因为ListView继承Flickabl
qml学习:ListView
bird_big_dream的博客
09-02 1019
15. **flickableDirection**: 允许滚动的方向，可以是 `Flickable.AutoFlickDirection`, `Flickable.HorizontalFlick`, `Flickable.VerticalFlick`, 或 `Flickable.HorizontalAndVerticalFlick`.3. **orientation**: 列表的方向，可以是 `Qt.Vertical` 或 `Qt.Horizontal`。滚动是自由的，用户可以停在任意位置。
QML ListView组件解析
qq_34999565的博客
08-07 2276
QT QML组件介绍
QML之ListView独立属性,信号,方法讲解
最新发布
sfdfd6965的博客
05-14 843
本文介绍了Qt 6.8.0中QML的ListView控件的基本使用和属性设置。ListView是一个不可视控件，继承自Flickable，主要用于显示列表数据。文章详细列举了ListView的属性，包括clip、width/height、cacheBuffer、count、currentIndex、currentItem、delegate、footer、header、spacing等，并解释了它们的作用和用法。此外，还介绍了如何设置高亮区域、键盘导航、以及通过section属性实现列表内容的分组显示。文章通
QSqlQueryModel QMLTableView
03-31
QMLTableView is not a built-in QML type. However, a QML TableView can be created using a QSqlQueryModel, which is a class that provides a read-only data model for SQL result sets. Here is an example of how to create a QML TableView using a QSqlQueryModel: 1. Import the necessary modules: ``` import QtQuick 2.0 import QtQuick.Controls 2.0 import QtSql 2.0 ``` 2. Create a QSqlQueryModel: ``` QSqlQueryModel { id: myModel query: "SELECT * FROM myTable" } ``` 3. Create a TableView and bind its model to the QSqlQueryModel: ``` TableView { model: myModel } ``` 4. Add columns to the TableView: ``` TableView { model: myModel TableViewColumn { role: "column1" title: "Column 1" } TableViewColumn { role: "column2" title: "Column 2" } } ``` 5. Run the application and the TableView will display the data from the QSqlQueryModel. Note: The QSqlQueryModel can also be used with other QML types such as ListView and GridView.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大草原的小灰灰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值