QML ListView隐藏的委托项

Posted 2023-02-22

【中文标题】QML ListView隐藏的委托项

【英文标题】：QML ListView hidden delegate item

【发布时间】：2015-12-03 22:20:36

【问题描述】：

有没有办法隐藏ListView中的某些项目？

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2

ApplicationWindow 
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true



    ListView 
        anchors.fill: parent

        model: ListModel 
            ListElement  color: "red"; visible: true
            ListElement  color: "green"; visible: false
            ListElement  color: "blue"; visible: true
        

        delegate: Rectangle 
            width: parent.width
            height: model.visible ? 30 : 0
            color: model.color
            visible: model.visible
            enabled: model.visible
        
    

如果只有 ListView 可以忽略不可见的Items'height，上述解决方案会很好。

手动将height 设置为0 对性能不利，因此我需要更好的解决方案。你能帮帮我吗？

【问题讨论】：

你测试了吗？ ListView 只是按需创建代表，即只创建可见代表，这取决于当前视口。你能同时展示 10 万个代表吗？

好点！我没有考虑。你的回答涵盖了一切。谢谢;)

我在我的一个项目中对其进行了测试，当隐藏 2k+ 委托时，我的 ListView 滞后。由于高度为 0，它们都可以放在视口上，ListView 会创建它们。我将可见和启用设置为 false 并将高度设置为 0。

关于信息，类似的问题是这个：***.com/questions/19207913/…我可以发誓我评论的答案当时有效，但它不适用于我的项目:(

在最新的 Qt 版本中，设置“可见”或“启用”都没有帮助。我看到了您的解决方案 GrecKo 并想尝试一下，但正如 BaCaRoZzo 所提到的，ListView 有一些实现更改，现在它不起作用。在第一个模型的基础上填充第二个模型是一种选择，但它不是一个性能友好的解决方案。

【参考方案1】：

我希望这能解决问题。对于像我这样的初学者来说，解决这个问题有助于更多地理解 qml。

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

ApplicationWindow 
    width: 640
    height: 480
    visible: true

ListView 
    id: displayListView
    anchors.fill: parent
    model: displayDelegateModel


ListModel 
    id: myModel
    ListElement  colo: "orange"; visible: true
    ListElement  colo: "red"; visible: false
    ListElement  colo: "white"; visible: true
    ListElement  colo: "black"; visible: false
    ListElement  colo: "green"; visible: true
    ListElement  colo: "yellow"; visible: false


VisualDataModel 
    id: displayDelegateModel

    delegate:  Rectangle 
        width: parent.width
        height: 30
        color: colo

        Text 
            text: colo
            anchors.centerIn: parent
            font.bold: true
            font.pixelSize: 20
        
    

    model: myModel

    groups: [
        VisualDataGroup 
            includeByDefault: false
            name: "visible"
        
    ]

    filterOnGroup: "visible"

    Component.onCompleted: 
        var rowCount = myModel.count;
        items.remove(0,rowCount);
        for( var i = 0;i < rowCount;i++ ) 
            var entry = myModel.get(i);
            if(entry.visible == true) 
                items.insert(entry, "visible");
            
        
    

【参考方案2】：

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

ApplicationWindow 
    width: 640
    height: 480
    visible: true
    property var model_items:[
        id: 0,  _color: "red"     , _visible: true,
        id: 1,  _color: "blue"    , _visible: false,
        id: 2,  _color: "yellow"  , _visible: true,
        id: 3,  _color: "gray"    , _visible: true,
    ]
    ListView 
        id: displayListView
        anchors.fill: parent
        model: myModel
        delegate: Rectangle
            id: rec
            width: 200
            height: 200
            color: _color
        
    
    function createModel()
        myModel.clear()
        for(var i=0;i<model_items.legth; i++)
            if(model_items[i]._visible)
                myModel.append(model_items[i])
    

    ListModel 
        id: myModel
    

    Component.onCompleted: 
        createModel()
    

【参考方案3】：

您可以使用 QSortFilterProxyModel 过滤值：

m_filterModel->setSourceModel(m_model);

【参考方案4】：

这是 ListView 的一个限制，目前仍未解决。解决方案是按照其他回复的建议使用其他模型进行过滤（或调整当前模型）。

或者更好的解决方案是将您的ListView 替换为

ScrollView Column Repeater

所以而不是：

ListView 
    anchors.fill: parent

    model: ...
    delegate: ...

做：

ScrollView 
    anchors.fill: parent
    
    Column 
        Repeater 
            model: ...
            delegate: ...