QML ListView：如何在头部上方及头部与首个列表项间添加间距

头部上方（红色箭头处）添加间距 #

可以通过给ListView的header包裹容器，添加空白区域或设置边距来实现：

方法1：用Item包裹并设置topMargin #

修改ListView的header部分：

header: Item {
    width: list.width
    // 替换p_topSpacing为你需要的间距值，比如10
    topMargin: p_topSpacing
    SelectlistDelegate {
        anchors.fill: parent
        p_height: p_listheight
        p_width: list.width
        p_index: -1
        p_text1: cp_screen.getListHeaderText()
        p_icon: cp_screen.getListHeaderIcon()
        p_isHeader: true
    }
}

方法2：用Column添加空白Item #

header: Column {
    width: list.width
    // 空白Item作为头部上方间距
    Item { height: p_topSpacing; width: parent.width }
    SelectlistDelegate {
        p_height: p_listheight
        p_width: list.width
        p_index: -1
        p_text1: cp_screen.getListHeaderText()
        p_icon: cp_screen.getListHeaderIcon()
        p_isHeader: true
    }
}

头部与首个列表项之间（蓝色箭头处）添加间距 #

有两种实现方式，按需选择：

方法1：在头部容器中设置bottomMargin #

延续Item包裹方式，增加底部边距：

header: Item {
    width: list.width
    topMargin: p_topSpacing
    // 替换p_headerItemSpacing为你需要的间距值
    bottomMargin: p_headerItemSpacing
    SelectlistDelegate {
        anchors.fill: parent
        p_height: p_listheight
        p_width: list.width
        p_index: -1
        p_text1: cp_screen.getListHeaderText()
        p_icon: cp_screen.getListHeaderIcon()
        p_isHeader: true
    }
}

方法2：在Delegate内部根据头部标识添加底部间距 #

修改ListDelegate.qml的根Item，新增间距属性并动态设置边距：

Item { id: root
    // 新增属性，控制头部底部间距
    property real p_headerBottomSpacing: 0
    // 原有属性保留
    property real p_height
    property real p_width
    property int p_index
    property string p_text1
    property string p_text2
    property string p_text3
    property string p_icon
    property bool p_isHeader
    property bool p_isSelected: root.ListView.view.currentIndex == p_index
    property string p_color: cp_config.getColor(p_isHeader ? Colors.ListItemDisabled : (p_isSelected ? Colors.ListItemSelected : Colors.ListItemDefault))
    
    width: p_width
    height: p_height
    // 仅头部应用底部间距
    bottomMargin: p_isHeader ? p_headerBottomSpacing : 0
  
    // 原有内容保留
    Rectangle { height: p_height; width: p_width; color: p_color;  
        RowLayout { anchors.verticalCenter: parent.verticalCenter;
            Image { Layout.leftMargin: 10; sourceSize.height: p_height * 0.5; source: "image://iconprovider/" + p_icon }
            Label { Layout.leftMargin: 20; text: p_text1 }
            Label { Layout.leftMargin: 20; text: p_text2 }
        }
        MouseArea{ enabled: !p_isHeader; anchors.fill: parent; onClicked: { root.ListView.view.currentIndex = p_index; } } 
    }
}

然后在ListView的header中传入间距值：

header: SelectlistDelegate {
    p_height: p_listheight
    p_width: list.width
    p_index: -1
    p_text1: cp_screen.getListHeaderText()
    p_icon: cp_screen.getListHeaderIcon()
    p_isHeader: true
    // 设置头部与首个列表项的间距
    p_headerBottomSpacing: p_headerItemSpacing
}

注：p_topSpacing和p_headerItemSpacing可替换为具体数值（如10），也可在上下文定义统一变量管理。

内容的提问来源于stack exchange，提问作者user2377283