根据可见属性更改 ListView 的高度

Posted 2023-02-16

【中文标题】根据可见属性更改 ListView 的高度

【英文标题】：Change height of ListView based on visible property

【发布时间】：2020-08-27 04:22:33

【问题描述】：

我有一个ListView，根据标题是否展开，项目是否可见。当visible 属性设置为false 时，该区域中只有空白区域。如何删除列表中的黑色空间以便下一个可见项目出现？ 目前我已经将height:model.count * 50 设置为每个项目的高度为 50。每次将项目的 visible 属性设置为 false 时，我都尝试减去 50，但这只会降低整个列表的高度，但仍然存在空白。

ListView  id: list
    focus: true
    anchors.top: header.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    width: parent.width
    height:model.count*50
    model:hall

    Component 
        id:comp
        Item
        width: parent ? parent.width : 0
        height: parent ? parent.height: 0

        Column
            id:col1
            width: parent.width - 16
            height: 25
            anchors.centerIn: parent

            spacing: 3

            Text  id: name
                width: parent.width
                text: name
                elide: Text.ElideMiddle
                font: "black"
                color: "grey"

            
            Row
                width: parent.width

                Text  id: file1
                    width: parent.width * 0.6 - 5
                    text: "hello"
                    horizontalAlignment: Text.AlignLeft
                    elide: Text.ElideMiddle
                    font: systemFont.TableCellFont
                
                Text  id: file2
                    width: parent.width*0.4 - 3
                    horizontalAlignment: Text.AlignRight
                    text: mod
                    font: systemFont.TableCellFont
                
            
        

        MouseArea 
            anchors.fill: parent
            onClicked: 
                console.warn("Mouse onClicked")
                
            
        
    
    

    delegate: Item 
        width:  parent.width;
        height: 
            if (!cric && expanded)
                return 50
            else
                return 0
        

        Loader 
            anchors.fill: parent
            sourceComponent: comp
            height: expanded? 50: 0
            readonly property int index:model.index
            readonly property string mod: model.mod
            visible: !cric && expanded
        
    

    Keys.onReturnPressed: 
            console.warn("Return pressed") 
        
    

【问题讨论】：

***.com/help/minimal-reproducible-example

【参考方案1】：

创建空白是因为通过设置 visible 为 false 隐藏的 List 项仍然设置了其尺寸。您可以将项目高度更新为 0，空白区域将不可见。试试这个例子以供参考。

import QtQuick 1.1

Rectangle
    width: 400; height: 400
    color: 'lightblue'

    ListView
        width: 400; height: count * 30
        model: 20
        delegate: Rectangle
            id: rectDel
            width: 200; height: 30
            color: 'lightgreen'
            border
                width: 1
                color: 'black'
            

            Text
                text: index
                anchors.centerIn: parent
            

            Rectangle
                width: 20; height: 20
                radius: 10
                color: 'red'
                anchors
                    verticalCenter: parent.verticalCenter
                    right: parent.right; rightMargin: 10
                
                Text text: 'X'; anchors.centerIn: parent; 
                MouseArea
                    anchors.fill: parent
                    onClicked: 
                        rectDel.visible = false
                        rectDel.height = 0
                    
                
            
        
    

【讨论】：

这适用于删除空格，但是当我使用键选择项目时，也会选择不可见的项目。当我按回车键时，屏幕上不可见的项目会打开。

有两种方法可以处理该问题。要么更新列表视图的模型，不包括不可见的项目。或者当您按键选择项目时，通过检查当前项目是否可见来处理列表视图中的按键/释放事件，并相应地更新列表视图当前索引。

是的，处理按键是我现在正在做的事情。我只是认为有更好的方法来做到这一点。猜不出来。谢谢。