QML之GridView实现滑动的网格布局

最新推荐文章于 2025-04-20 02:34:09 发布

原创

最新推荐文章于 2025-04-20 02:34:09 发布 · 3.8k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#gui #qt5 #qml

本文介绍了如何在Qt Quick中使用GridView创建滑动表格，包括关键属性设置、模型与代理的定义，以及代码实例。重点展示了如何设置cellHeight和cellWeight，以及使用ListModel和Delegate来展示数据。

最近在做关于滑动网格的需求，正好用到了GridView实现对应的功能。
在这里插入图片描述

1、GridView 关键属性

GridView相关的属性比较多，下面是一些关键的属性：

cellHeight: 表格中单个格子的高度
cellWeight: 表格中单个格子的宽度
currentIndex: 当前焦点所在的索引
delegate: 代理，即格子内的实现方式
layoutDirection: 所有格子的排列顺序
model: 表格的数据

2、GridView实现滑动表格

在这里插入图片描述

实现思路：

1、创建一个GridView，设置格子的大小
2、创建一个model（即数据库），一个delegate（格子内的显示形式）

实现代码：
main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
   
   
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
   
   
        anchors.fill:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

PRML_MAN

关注关注

9
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

QML GridView 网格视图

青春不老，奋斗不止！

03-13

1311

和 ListView 一样，GridView 也是基于 Flickable 的视图组件，它们的用法非常相似。不同的是，ListView 中的元素被存储在线性链表中，并以单列（或单行）的形式进行展示的，因此适用于垂直（或水平）列表的场景；而 GridView 中的元素则被存储在一个二维数组中，并以网格的形式进行展示的，因此更适用于具有二维结构或以网格方式呈现的场景，如相册图库、视频列表、工具导航等。

QML 中GridView翻页实现

波风水门

04-10

3731

前言使用GridView翻页让我折腾了一天，就是鼠标滑动一下，正好翻过去当前能看到的视图的一页，而不是随机停止，或者只是移动一个item，当然，如果只是翻页就简单了，问题是还要记录翻页后，当前的所在页面是第几页，这个就麻烦了。所幸，根据百度和Qt文档的不停地摸索，还是想出了一个勉强能维持得了效果的实现方法。看一下效果图：上面点击左右箭头也是可以跳转页面的，只是没有动画效果，但是页数还是在变...

1 条评论您还未登录，请先登录后发表或查看评论

qml 实现gridview带滚动条和翻页

06-21

qml 实现gridview带滚动条和翻页，通过滚动可以实现页数变化，通过点击页数或翻页键可以实现滚动条变化

QML视图（GridView）

qq_45303986的博客

03-13

1660

GridView的用法和ListView相似，都是继承自Flickable，但GridView是将项目排列成网络。GridView.FlowLeftToRight (default) 从左到右流动。

QMl实现GridView上下左右翻页

03-10

QT开发qml实现grideView的翻页效果

QML网格视图（The GridView）

让每一个想学习编程的人，都能学会，都能看懂，看了都有收获!

05-04

779

一个网格视图（GridView）也包含了页脚与页眉，也可以使用高亮代理并且支持捕捉模式（snap mode）的多种反弹行为。它也可以使用不同的方向（orientations）与定向（directions）来定位。定向使用flow属性来控制。它可以被设置为GridView.LeftToRight或者GridView.TopToBottom。模型的值从左往右向网格中填充，行添加是从上往下。视图使用一个垂直方向的滚动条。后面添加的元素也是由上到下，由左到右。此外还有flow属性和layoutDirection

QML类型：GridView

友善啊，朋友的博客

10-14

5508

一、描述 GridView 继承自 Flickable。用作显示来自内置 QML 类型（如 ListModel 和 XmlListModel）或从 QAbstractListModel 继承的 C++ 中定义的自定义模型类创建的模型中的数据。二、使用示例 import QtQuick 2.12 import QtQuick.Window 2.0 Window { id:root; visible: true; width: 200; height: 200 Li

qml GridView详解

ckg3824278的博客

01-10

912

GridView是 QML 中用于显示网格状布局的视图控件，适合展示需要平铺的内容，如图片和列表。它通过绑定模型数据来动态展示项，并支持水平和垂直方向的滚动。GridView会自动根据容器大小和单元格尺寸来排布项。

GridView的左右滑动+分页

06-04

在Android开发中，GridView是一种常见的布局管理器，用于展示数据集，通常以网格形式排列。在标题"GridView的左右滑动+分页"中，提到的功能是为GridView添加左右滑动以及分页加载数据，这在处理大量数据时非常有用，...

gridview整页翻页的滑动，上滑和下滑

07-06

在Android开发中，GridView是一种常用的布局控件，它允许我们以网格的形式展示数据。在标题“gridview整页翻页的滑动，上滑和下滑”中，所提及的知识点是关于GridView如何实现类似书籍翻页效果的滚动操作，即在用户...

QML类型说明-GridView

最新发布

06-26

<think>我们正在处理关于QMLGridView调整滑动速度的问题。根据用户的问题，我们需要调整GridView的滑动速度。参考引用[2]中提到，可以使用`flick`函数和`verticalVelocity`属性（对于水平滑动则是`horizontalVelocity`）来调整滑动速度。具体做法是：在GridView的`onFlickStarted`信号处理器中，获取当前的滑动速度（verticalVelocity或horizontalVelocity），然后使用`flick`函数并设置新的速度值。需要注意的是，速度的方向：垂直方向上，向上滑动为负值，向下滑动为正值；水平方向上，向左滑动为负值，向右滑动为正值。因此，我们可以这样实现：1.在GridView中添加`onFlickStarted`信号处理器。2.在处理器中，获取当前的滑动速度（假设我们要调整水平滑动速度，则使用`horizontalVelocity`）。3.计算新的速度值（可以按比例增加或减少，或者加上一个固定值，注意方向）。4.调用`flick`函数，传入新的水平速度和垂直速度（垂直方向可以保持不变，即0，因为我们只调整水平滑动速度）。示例代码：```GridView{id:gridView//...其他属性onFlickStarted:{//假设我们要增加水平滑动的速度，这里以增加50%为例varnewHorizontalVelocity=horizontalVelocity*1.5;//注意：flick函数的两个参数分别是x方向和y方向的速度。我们只改变水平速度，垂直方向保持0（即不产生垂直滑动）//但是注意，如果当前是垂直滑动，我们可能不想改变垂直速度？所以这里需要根据需求调整。//由于GridView通常是水平或垂直一个方向滑动，我们可以根据实际方向调整。//如果我们只关心水平滑动，那么可以这样：flick(newHorizontalVelocity,0);}}```但是，上面的例子中，我们假设GridView是水平滑动的。如果GridView是垂直滑动的，那么我们应该调整垂直速度，例如：```GridView{id:gridView//...其他属性onFlickStarted:{//调整垂直滑动的速度，增加50%varnewVerticalVelocity=verticalVelocity*1.5;flick(0,newVerticalVelocity);}}```另外，引用[2]中的示例代码是增加一个固定值，并注意方向（负值代表向上，正值代表向下）：```onFlickStarted:{varsd=(Math.abs(verticalVelocity)+500);flick(0,verticalVelocity<0?-sd:sd);}```这个例子中，将垂直滑动的速度绝对值增加了500，然后根据原方向（正负）重新设置。因此，用户可以根据需要选择乘以一个系数（比例）或增加一个固定值来调整滑动速度。注意：`flick`函数会触发一个新的滑动事件，所以我们在`onFlickStarted`中再次调用`flick`可能会再次触发`onFlickStarted`，导致循环。但是根据Qt文档，在`onFlickStarted`中调用`flick`是安全的，因为此时当前的滑动事件会被终止，然后开始新的滑动事件。不过，我们应避免无限递归，例如，我们修改速度后调用一次即可。另外，还可以通过设置GridView的`flickDeceleration`属性来调整滑动减速度（单位是像素/秒²），减速度越小，滑动时间越长，感觉上滑动距离越远（但速度变化慢）；减速度越大，滑动停止得越快。例如：```GridView{flickDeceleration:1000//默认值通常是1000，可以根据需要调整}```所以，调整滑动速度有两种主要方法：1.在`onFlickStarted`中通过`flick`函数重新设置速度（可以改变初始速度）。2.调整`flickDeceleration`改变减速度，从而影响滑动的持续时间。用户可以根据实际需求选择使用。最后，根据用户的问题，他可能希望加快滑动速度，那么可以按照上述方法之一实现。注意：由于GridView的滑动速度还受到其他因素影响（如摩擦系数等），但QML中公开的主要是`flickDeceleration`和通过`flick`函数控制。因此，我们给出两种调整方法的说明和示例代码。相关问题：1.如何调整GridView的滑动距离？2.如何禁用GridView的滑动？3.如何实现GridView的翻页效果？</think>在 QML 中调整 GridView 的滑动速度，可通过以下方法实现： ### 核心方法：使用 `flick()` 函数和速度属性 ```qml GridView { id: gridView // ... 其他属性设置 ... onFlickStarted: { // 获取当前滑动速度并增加加速度（示例增加500） var adjustedSpeed = Math.abs(verticalVelocity) + 500; // 重新触发滑动（注意速度方向处理） flick(0, verticalVelocity < 0 ? -adjustedSpeed : adjustedSpeed) } } ``` ### 关键参数说明： 1. **`verticalVelocity`** 实时获取垂直滑动速度值（向上滑动为负值，向下滑动为正值） 2. **`flick(qreal xVelocity, qreal yVelocity)`** 手动触发滑动效果的函数，参数说明： - `xVelocity`：水平滑动速度（0 表示禁止水平滑动） - `yVelocity`：垂直滑动速度（正/负值控制方向） 3. **速度调整技巧** ```js // 增加固定加速度（推荐） var newSpeed = Math.abs(verticalVelocity) + 500; // 按比例加速（示例加速1.5倍） var newSpeed = verticalVelocity * 1.5; ``` ### 其他辅助优化方法： ```qml GridView { // 减少滑动阻力（默认值1000） flickDeceleration: 500 // 设置滑动阈值（低于该值不触发滑动） flickableDirection: Flickable.VerticalFlick maximumFlickVelocity: 2500 // 最大速度限制 // 禁用非手势滑动（参考引用[4]） onMovementStarted: if (!drag.active) movement.enabled = false } ``` ### 方向处理注意事项： - **垂直滑动**：使用 `verticalVelocity` 和 `flick(0, ySpeed)` - **水平滑动**：使用 `horizontalVelocity` 和 `flick(xSpeed, 0)` - **混合方向**：需同时处理两个方向的速度分量 > 实际测试建议：通过 `console.log(verticalVelocity)` 输出实时速度值，根据设备性能调整加速度参数[^2][^3]。 --- ### 相关问题 1. 如何实现 GridView 的翻页效果而非连续滑动？ 2. 怎样动态调整 GridView 的滑动阻力系数？ 3. GridView 和 ListView 在滑动处理上有何区别？ 4. 如何禁用 GridView 的边界弹性效果？ [^1]: QML 中滑动容器的基础实现原理 [^2]: GridView 滑动速度的动态调整方法 [^3]: 翻页实现中的方向处理难点 [^4]: 禁止特定方向滑动的拦截方法