本页内容

使用列表和其他数据模型

应用程序通常需要处理和显示组织成列表或网格视图的数据。为此,需要使用模型、视图和委托。它们将数据可视化模块化,以便让你控制数据的不同方面。例如,您可以将列表视图与网格视图互换,而数据几乎不会发生变化。同样,将数据实例封装在委托中,开发人员就可以决定如何呈现或处理数据。

模型包含数据及其结构。有几个组件可用于创建不同类型的模型。视图是一个容器,用于在列表、网格或路径中显示数据。委托机构决定数据在视图中的显示方式。委托将模型中的每一条数据封装起来。然后就可以通过委托访问数据了。

为了使数据可视化,视图的模型属性绑定到一个模型,而委托属性绑定到一个组件。

更多信息,请参阅 Qt Quick 中的模型和视图

列表视图和网格视图

创建List ViewGrid View 组件实例,以列表或网格格式组织其他组件实例。它们在Components >Default Components >Views 中提供。

List View 会以列表形式组织其他组件,而Grid View 则会以网格形式组织其他组件。默认情况下,列表和网格视图中的组件从左到右垂直排列。它们在水平方向上从左到右排列,在垂直方向上从上到下排列。

您可以在Orientation 字段中更改列表视图的方向,在Flow 字段中更改网格视图的流程。您可以在Layout direction 字段中更改布局方向。通过设置这些属性的值,可以生成各种布局。

列表视图属性

对于列表视图,可以在Spacing 字段中指定列表项之间的空间。对于网格视图,可以在WH 字段中指定每个单元格的宽度和高度。

网格视图属性

选择Navigation wraps 可指定按键导航在到达视图的末尾时会环绕并将选择移动到视图另一端的下一行或单元格。

列表和网格视图本身都是可移动的

Snap mode 字段的值决定了拖动或弹动后视图滚动的位置。默认情况下,视图会在可见区域内的任意位置停止。如果选择SnapToRow ,视图将以与视图起始位置对齐的行(或网格视图从上到下流动的列)停止。如果选择SnapOneRow ,则在松开鼠标键时,视图将以不超过第一行或第一列的距离停止。该选项对于一次移动一个页面特别有用。

委托缓存

Cache 字段的值决定委托是否保留在视图可见区域之外。

如果该值大于零,则视图可以在指定的缓存范围内保留尽可能多的委托实例。例如,在垂直视图中,代表高度为 20 像素,有三列,缓存设置为 40,那么在可见区域的上方和下方最多可以创建或保留六个代表。缓存的委托是异步创建的,允许在多个帧中创建,减少了跳帧的可能性。为提高绘制性能,不绘制可见区域外的委托。

此属性的默认值取决于平台,但通常大于零。负值将被忽略。

缓存不是像素缓冲区。它只维护附加的实例化代表。

注意: 设置Cache 属性并不能取代创建高效的委托。它可以提高滚动行为的流畅性,但会增加内存使用量。委托中的项目和绑定越少,视图滚动的速度就越快。重要的是要认识到,设置缓存只能延缓加载缓慢的委托所造成的问题,并不能解决这一问题。

视图高亮

List View HighlightGrid View Highlight 部分,您可以指定用于突出显示视图中项目的属性。

列表视图 突出显示属性。

如果将Range 字段的值设置为ApplyRangeStrictlyEnforceRange ,列表或网格视图中的当前项目就会高亮显示。选择应用范围时,视图会尝试将高亮显示保持在范围内。但是,在视图的两端或由于鼠标交互作用,高亮可能会移动到范围之外。选择执行范围时,高亮显示永远不会超出范围。如果键盘或鼠标操作会导致高亮显示超出范围,当前项目就会更改。

Preferred beginPreferred end 字段的值会影响视图滚动时当前项目的位置。例如,如果当前选中的项目在滚动时应保持在视图的中间位置,则应将 begin 和 end 值设置为中间项目的上下坐标。如果以编程方式更改当前项目,视图将自动滚动,使当前项目位于视图中间。开始值必须小于结束值。

选择Follows current 可使视图管理高亮显示。高亮显示会跟随当前项目平滑移动。否则,视图不会移动高亮显示,任何移动都必须由高亮显示来实现。

Move durationMove velocityResize durationResize velocity 字段的值可控制高亮显示的移动速度和大小调整动画。

编辑列表模型

添加Grid ViewList ViewPath View 时,会自动添加ListModel 和为模型中每个项创建实例的委托组件。对于网格和列表视图,您可以在Qt Design Studio 中编辑列表模型。

列表视图预览

编辑列表模型:

  1. Components >Default Components >Views 拖动Grid ViewList ViewNavigator2D 视图。
  2. 右键单击Navigator 中的视图,然后在上下文菜单中选择Edit List Model ,打开列表模型编辑器。

    列表模型编辑器中的列表视图

  3. 双击列标题和单元格以更改其值。
  4. 使用工具栏按钮添加、删除或移动行和列。在列表中,每列代表一个属性,每行添加一个列表项。

您可以在Code 视图或Edit 模式中用其他更复杂的模型和委托替换默认模型和委托。Item DelegateSwipe Delegate 组件也可在Components >。 Qt Quick Controls.

路径视图

Path View 组件将数据模型提供的数据布局在Path 上。

通过图形样条线编辑器,您可以指定路径视图路径,这在Code 视图或Edit 模式下是一项非同小可的任务。

路径视图编辑器。

要开始编辑路径,请双击2D 视图中的路径视图。编辑器会将PathCubic 路径对象组成路径。这些对象是立方贝塞尔曲线,在给定位置上有两个控制点。在2D 视图中拖放控制点即可构建曲线。

此外,还间接支持PathLinePathQuad 路径对象。要使曲线段线性,请在右键菜单中选择Make Curve Segment Straight

默认情况下,路径是封闭的,这意味着其起点和终点是相同的。要为其创建独立的起点和终点,请右键单击编辑点打开右键菜单,然后清除Closed Path

要为曲线段添加中间点,请在右键菜单中选择Split Segment

Path View 部分,您可以为路径视图指定其他属性。Drag margin 字段的值指定了启动鼠标拖动时与路径的最大距离。

路径视图属性

选择Interactive 复选框可使项目可闪烁。Flick deceleration 字段的值指定了弹动减速的速度。

Offset 字段中,指定项目从初始位置沿路径移动的距离。这是一个实数,范围从 0 到Item count 字段的值,显示模型中的项目数。

Path View Highlight 部分,可以指定突出显示路径对象的属性。

模型组件摘要

下表列出了可用于将数据模型添加到用户界面的组件。位置列表示组件在Components 中的位置。MCU 支持列表示 MCU 支持哪些组件。

图标名称位置MCU 支持用途
网格视图组件Grid View默认组件 - 视图模型的网格可视化。
项目代表组件Item DelegateQt Quick Controls标准视图项,可在各种视图和控件(如ListViewComboBox )中作为委托项使用。
列表视图组件List View默认组件 - 视图模型的列表可视化。
路径视图组件路径视图默认组件 - 视图沿路径可视化模型内容。
滚动视图组件Scroll ViewQt Quick Controls为用户定义的内容提供滚动功能。可用于替代Flickable 组件。
堆栈视图组件Stack ViewQt Quick Controls基于堆栈的导航模型。
项目代表组件Swipe DelegateQt Quick Controls视图项,可左右滑动以显示更多选项或信息。它在ListView 等视图中用作委托。
轻扫视图组件Swipe ViewQt Quick Controls使用户可以通过横向滑动来浏览页面。

另请参阅 如何使用用户界面组件Qt Quick 用户界面设计设计Qt Quick 用户界面

Copyright © The Qt Company Ltd. and other contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.