Summary
小结
In this chapter, we have looked at models, views, and delegates. For each data entry in a model, a view instantiates a delegate visualizing the data. This separates the data from the presentation.
在本章中,我们介绍了模型、视图和委托。对于模型中的每个数据,视图将实例化一个委托来可视化数据。这称为数据与表示分离。
A model can be a single integer, where the index
variable is provided to the delegate. If a JavaScript array is used as a model, the modelData
variable represents the data of the current index of the array, while index
holds the index. For more complex cases, where multiple values need to be provided by each data item, a ListModel
populated with ListElement
items is a better solution.
模型可以是单个整数,其中索引变量提供给委托项。如果JavaScript数组用作模型,modelData变量表示数组当前索引的数据,而index保存索引。对于更复杂的情况,每个数据项需要提供多个值,使用ListElement项填充ListModel是更好的解决方案。
For static models, a Repeater
can be used as the view. It is easy to combine it with a positioner such as Row
, Column
, Grid
or Flow
to build user interface parts. For dynamic or large data models, a view such as ListView
, GridView
, or TableView
is more appropriate. These create delegate instances on the fly as they are needed, reducing the number of elements live in the scene at once.
对于静态模型,可以使用重复器Repeater
作为视图。很容易将其与定位器(如行Row
、列Column
、网格Grid
或流Flow
)组合,以构建用户界面部件。对于动态或大型数据模型,ListView、GridView或TableView等视图更合适。它们会根据需要动态创建委托实例,从而一次减少场景中存在的元素数量。
The difference between GridView
and TableView
is that the table view expects a table type model with multiple columns of data while the grid view shows a list type model in a grid.
GridView和TableView之间的区别在于,表视图需要具有多列数据的表类型模型,而网格视图在网格中显示列表类型模型。
The delegates used in the views can be static items with properties bound to data from the model, or they can be dynamic, with states depending on if they are in focus or not. Using the onAdd
and onRemove
signals of the view, they can even be animated as they appear and disappear.
视图中使用的委托项可以是静态项,其属性绑定到模型中的数据,也可以是动态项,其状态取决于它们是否处于焦点。使用视图的onAdd和onRemove信号,甚至可以在它们出现和消失时设置动画。