如何在 QML 中的 Listview 中保留特定列表项之间的空间

Posted 2023-02-16

【中文标题】如何在 QML 中的 Listview 中保留特定列表项之间的空间

【英文标题】：How to retain the space between the particular list items in Listview in QML

【发布时间】：2020-03-30 16:44:23

【问题描述】：

我有一个包含一些列表项的列表视图。但我需要在列表视图中的第二个和第三个列表项之间留一个空格。

我尝试在列表视图 component.oncompleted() 中设置特定项目的高度。在列表视图中，如果我滚动到最后一个项目并向上移动在 component.oncompleted 中设置的 height 属性，我可以拥有大约 30 个项目。有没有其他方法可以保留第二个和第三个列表项之间的空间。

import QtQuick 2.9
import QtQuick.Window 2.2

Window

    visible: true
    width: 1920
    height: 1080
    color: "black"
    property var curritem
    property var items

    ListView
    
        id:idlistview
        model:SampleListModel
        x:350
        y:200
        width: 700
        height: 500
        clip: true
        spacing: 10
        focus: true
        highlight: Rectangle
        
            x: 85
            y: idlistview.currentItem.y
            width: 400
            height: 66
            color: "grey"
            Behavior on y
            
                SpringAnimationspring: 2;damping: 0.1
            
        
        highlightFollowsCurrentItem: false

        delegate: iddelegatecomponent
        Component
        
            id:iddelegatecomponent
            Item
            
                id: iditem
                x: 100
                y: 250
                width: 400
                height: 50
                Text
                
                    id: idtext
                    text: caption
                    color: "#FFFFFF"
                    font.bold: true
                    font.pixelSize: 26
                    anchors.verticalCenter: parent.verticalCenter
                   // anchors.horizontalCenter:  parent.horizontalCenter
                    horizontalAlignment: Text.AlignLeft
                
            
        
    

【参考方案1】：

你可以玩index，每个delegate都知道它的index，例如：

ListView 
    model:10
    spacing: 1
    focus: true
    anchors.fill: parent
    delegate: Item 
        width: parent.width
        height: index == 3 ? 80 : 40
        Rectangle 
            color: Qt.darker(Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0))
            width: parent.width
            height: 40
            Text 
                text: "item" + index
                color: "white"
                anchors.centerIn: parent