是否可以仅显示 QML 列表视图的某些索引? [英] Is it possible to show only certain indexes of a QML listview?

问题描述

是否可以在 QML 列表视图中只显示某些索引或索引范围?

Is it possible to show only certain indexes or a range of indexes in QML listviews?

我有一个列表模型，里面有一堆我正在重用的信息.例如，是否可以有一个仅显示索引 5 到 8 的列表?

I have a listmodel that has a bunch of info that I am reusing. Would it be possible to have a list showing, for example, only indices 5 to 8?

推荐答案

提出一个纯 QML 方法来解决这个问题会很有趣.这肯定不是短路，但它是一个解决方案.

It would be interesting to present a pure QML approach to the problem. This is not the shorted path, for sure, but it is a solution.

该方法基于 DelegateModel 在 models QML 模块中可用.它在文档中读取:

The approach is based on the DelegateModel available in the models QML module. It reads in the documentation:

DelegateModel 类型封装了一个模型和委托为模型中的项目实例化.

The DelegateModel type encapsulates a model and the delegate that will be instantiated for items in the model.

通常不需要创建 DelegateModel.然而，它可以对操作和访问模型索引很有用QAbstractItemModel 子类用作模型.另外，DelegateModel与 Package 一起使用来为多个视图提供委托，并使用 DelegateModelGroup 对委托进行排序和过滤项.

It is usually not necessary to create a DelegateModel. However, it can be useful for manipulating and accessing the modelIndex when a QAbstractItemModel subclass is used as the model. Also, DelegateModel is used together with Package to provide delegates to multiple views, and with DelegateModelGroup to sort and filter delegate items.

DelegateModel 确实是一种功能强大的类型，具有很多功能(有关详细信息，请参阅链接的文档).DelegateModel 的两个关键属性是 groups 和 filterOnGroup.前者基本上是一个 DelegateModelGroup 列表，它定义了要过滤或不过滤的项目.后者用于应用特定过滤器，即选择包含在 groups 中的特定 DelegateModelGroup，只需将该属性设置为所选组的名称即可.

DelegateModel is really a powerful type with a lot of functionalities (see the linked documentation for details). Two key properties of DelegateModel are groups and filterOnGroup. The former is basically a list of DelegateModelGroup which defines the items to be filtered or not. The latter is used to apply a specific filter, i.e. choose a specific DelegateModelGroup contained in groups, by simply setting the property to the name of the chosen group.

请注意，引用 VisualDataModel 或 DelegateModel 是相同的，因为第一个是出于兼容性原因提供的(同样适用于 VisualDataGroup wrt DelegateModelGroup).

Note that referring to VisualDataModel or DelegateModel is the same since the first is provided for compatibility reasons (the same applies to VisualDataGroup w.r.t. DelegateModelGroup).

总而言之，可以通过这种方式在完整的 QML 中过滤模型:

Summing up, it is possible to filter a model in full QML in this way:

1. 创建一个模型作为过滤模型的来源
2. 将 model 提供给 VisualDataModel/DelegateModel
3. 定义一个 VisualDataGroup/DelegateModelGroup(或多个) - includeByDefault 设置为 false 以避免自动从原始模型中添加所有项
4. 定义填充组的策略
5. 将 filterOnGroup 设置为所选组
6. 将视图模型设置为 VisualDataModel 模型

1. Create a model as a source of filtered models
2. Feed the model to a VisualDataModel/DelegateModel
3. Define a VisualDataGroup/DelegateModelGroup (or more than one) - includeByDefault set to false to avoid automatic addition of all items from the original model
4. Define policies to populate the groups
5. Set filterOnGroup to the chosen group
6. Set the view model to the VisualDataModel model

在下一个示例中，为简单起见，我只在 Component.onCompleted 事件处理程序期间填充该组一次.如前所述，应该选择策略，这取决于特定的用例.

In the next example, for simplicity, I just populate the group once, during the Component.onCompleted event handler. As said, policies should be chosen and that's depends on the specific use case.

在示例中，只有 key 角色等于 0 的项目被添加到 key0 组中，这是 key0代码>列表视图.上述清单在代码中突出显示.

In the example only the items with key role equal to 0 are added to the group key0 which is the one shown in the ListView. The checklist described above is highlighted in the code.

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.0

ApplicationWindow {
    title: qsTr("DelegateModel test")
    width: 200
    height: 350
    visible: true

    ListView {
        id: displayListView
        anchors.fill: parent
        spacing: 5
        //
        model: displayDelegateModel             // 6
    }

    ListModel {                                 // 1
        id: myModel
        ListElement { vis: "One"; key: 0; }
        ListElement { vis: "two"; key: 1; }
        ListElement { vis: "Three"; key: 0; }
        ListElement { vis: "Four"; key: 0; }
        ListElement { vis: "Five"; key: 1; }
        ListElement { vis: "Six"; key: 1; }
        ListElement { vis: "Seven"; key: 0; }
    }

    VisualDataModel {
        id: displayDelegateModel

        delegate:  Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            height: 25
            color: "steelblue"

            Text {
                text: vis
                anchors.centerIn: parent
                font.bold: true
                font.pixelSize: 20
            }
        }

        model: myModel                          // 2

        groups: [
            VisualDataGroup {                   // 3
                includeByDefault: false         // NECESSARY TO AVOID AUTOADDITION
                name: "key0"
            }
        ]

        filterOnGroup: "key0"                   // 5

        Component.onCompleted: {                // 4
            var rowCount = myModel.count;
            items.remove(0,rowCount);
            for( var i = 0;i < rowCount;i++ ) {
                var entry = myModel.get(i);
                if(entry.key == 0) {
                    items.insert(entry, "key0");
                }
            }
        }
    }
}

这篇关于是否可以仅显示 QML 列表视图的某些索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！