使用列表和其他数据模型

应用程序通常需要处理和显示以列表或网格视图形式组织的数据。为此，会使用模型、视图和委托。它们将数据的可视化进行模块化处理，以便您能够控制数据的各个方面。 例如，只需对数据进行微小调整，即可将列表视图替换为网格视图。同样，将数据实例封装在委托中，可让开发人员自主决定数据的呈现或处理方式。

模型包含数据及其结构。有多种组件可用于创建不同类型的模型。视图是一个容器，用于以列表、网格或沿路径的方式显示数据。委托则决定数据在视图中的呈现方式。委托会获取模型中的每一项数据并将其封装起来，随后可通过委托访问这些数据。

为了可视化数据，需将视图的 model 属性绑定到模型，并将 delegate 属性绑定到组件。

有关更多信息，请参阅《Qt Quick 》中的“模型与视图”部分。

列表视图和网格视图

创建 `List View ` 和 `Grid View ` 组件的实例，以列表或网格格式组织其他组件实例。这些组件可在Components >Default Components >Views 中获取。

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

您可以在“Orientation ”字段中更改列表视图的方向，并在“Flow ”字段中更改网格视图的排列方向。您还可以在“Layout direction ”字段中更改布局方向。通过设置这些属性的值，您可以生成多种布局。

对于列表视图，您可以在“Spacing ”字段中指定列表项之间的间距。对于网格视图，您可以在“W ”和“H ”字段中指定每个单元格的宽度和高度。

选中“Navigation wraps ”选项，可指定当导航到达视图末尾时，按键导航将自动循环，并将选中项移至视图另一端的下一行或单元格。

列表视图和网格视图均支持滑动操作。

“Snap mode ”字段的值决定了拖动或轻扫后视图滚动将如何定位。默认情况下，视图会在可见区域内的任意位置停止。如果选择“SnapToRow ”，视图将定位在与视图起始位置对齐的一行（对于自上而下滚动的网格视图，则为一列）上。 若选择“SnapOneRow ”，视图将停留在距离鼠标按钮释放时首个可见行不超过一行的位置。此选项特别适用于逐页移动。

委托缓存

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

如果该值大于零，视图可能会保留尽可能多的已实例化委托，直到达到指定缓存的上限。例如，如果在垂直视图中，委托高度为 20 像素，共有三列，且缓存设置为 40，则在可见区域上方和下方最多可创建或保留六个委托。 缓存的委托对象是异步创建的，这使得创建过程可以跨越多个帧进行，从而降低了跳帧的可能性。为了提高绘制性能，可见区域外的委托对象不会被绘制。

该属性的默认值取决于平台，但通常为大于零的数值。负值将被忽略。

缓存并非像素缓冲区，它仅用于维护已实例化的额外委托对象。

视图高亮

在“List View Highlight ”和“Grid View Highlight ”部分中，您可以指定用于在视图中突出显示项目的属性。

若将“Range ”字段的值设置为“ApplyRange ”或“StrictlyEnforceRange ”，列表或网格视图中的当前项目将被高亮显示。当您选择应用范围时，视图会尝试将高亮保持在该范围内。但是，高亮可能会在视图两端或因鼠标交互而移出该范围。 当您选择“强制范围”时，高亮区域绝不会移出该范围。如果键盘或鼠标操作会导致高亮区域移出范围，则当前项目会发生变化。

Preferred begin 和Preferred end 字段的值会影响视图滚动时当前项目的位置。例如，如果希望在滚动时当前选中的项目保持在视图中央，请将begin和end值分别设置为中央项目所在位置的顶部和底部坐标。 如果通过编程方式更改了当前项目，视图将自动滚动，使当前项目位于视图中央。起始值必须小于结束值。

选择“Follows current ”可启用视图管理高亮区域的功能。高亮区域将平滑移动以跟随当前项目。否则，视图不会移动高亮区域，任何移动都必须由高亮区域自身实现。

Move duration 、Move velocity 、Resize duration 和Resize velocity 字段的值控制高亮区域移动和调整大小的动画速度。

编辑列表模型

当您添加Grid View 、List View 或Path View 时，系统会自动添加ListModel 以及为模型中的每个项目创建实例的委托组件。对于网格和列表视图，您可以在Qt Design Studio 中编辑列表模型。

要编辑列表模型：

1. 将“Grid View ”或“List View ”从Components >Default Components >Views 拖动到Navigator 或2D 视图中。
2. 在Navigator 中右键单击该视图，并在上下文菜单中选择“Edit List Model ”以打开列表模型编辑器。

   

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

您可以在“Code ”视图或“Edit ”模式下，用其他更复杂的模型和委托来替换默认模型和委托。在“Components ”中还提供了Item Delegate 和Swipe Delegate 组件 > Qt Quick Controls中提供。

路径视图

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

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

要开始编辑路径，请在“2D ”视图中双击路径视图。该编辑器由“PathCubic ”路径对象的路径组成。这些是具有两个控制点、指向给定位置的三次贝塞尔曲线。在“2D ”视图中拖放控制点以构建曲线。

此外，PathLine 和PathQuad 路径对象也间接受到支持。若要使曲线段呈直线，请在上下文菜单中选择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 Delegate	Qt Quick 控件	无	一个标准视图项，可作为各种视图和控件（例如ListView 和ComboBox ）的委托使用。
	List View	默认组件 - 视图	是	模型的列表可视化。
	路径视图	默认组件 - 视图	否	沿路径可视化模型的内容。
	Scroll View	Qt Quick 控件	无	为用户定义的内容提供滚动功能。可替代Flickable 组件使用。
	Stack View	Qt Quick 控件	否	基于堆栈的导航模型。
	Swipe Delegate	Qt Quick 控件	否	一种视图项，可通过向左或向右滑动来显示更多选项或信息。它被用作ListView 等视图中的委托。
	Swipe View	Qt Quick 控件	是	允许用户通过横向滑动来浏览页面。