QML ListView 隐藏委托项

Question

有没有办法在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可以忽略不可见的Item的height，那么上面的解决方案将是好的。

手动将height设置为0会影响性能，因此我需要一个更好的解决方案。你能帮我吗？

- user2672883

---

你测试过这个吗？ListView 只在需要时创建代理，即只有可见的代理被创建，并且这取决于当前视口。你可以同时显示10万个代理吗？ - BaCaRoZzo

好观点！我没有想到过。你的回答涵盖了所有内容。谢谢;) - user2672883

我在我的一个项目中进行了测试，当隐藏超过2k个委托时，我的ListView会出现延迟。 由于它们的高度为0，它们都可以适应视口并且ListView会创建所有委托。 我将可见性(visible)和启用状态(enabled)设置为false，并将高度(height)设置为0。 - GrecKo

而且，类似的问题是这个： http://stackoverflow.com/questions/19207913/removing-empty-spaces-when-the-delegate-is-not-visible-in-a-gridview/我敢肯定我评论的答案当时是有效的，但在我的项目中不起作用 :( - GrecKo

在最新的Qt版本中，设置“visible”或“enabled”都没有帮助。 我看到了你的解决方案GrecKo，并想尝试一下，但正如BaCaRoZzo所提到的，ListView有一些实现变化，现在它不起作用了。 拥有第二个基于第一个模型填充的模型是一种选择，但这不是一种性能友好的解决方案。 - user2672883

Answer 1

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()
    }
}

- Pham Thanh

Answer 2

我希望这可以解决问题。对于像我这样的初学者来说，解决这个问题有助于更好地理解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");
            }
        }
    }
}
}

- Sam P George

Answer 3

您可以使用QSortFilterProxyModel来过滤数值：

m_filterModel->setSourceModel(m_model);

- alez

Answer 4

这是ListView的一个限制，目前仍未得到解决。解决方案有两种，一种是使用另一个模型进行过滤（或调整当前模型），正如其他回复所建议的那样。

另一种更好的解决方案是用以下组合替换你的ListView：

ScrollView { Column { Repeater {} } }

因此，不再是：

ListView {
    anchors.fill: parent

    model: ...
    delegate: ...
}

做：

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

- Mahmoud Badri