如何使Qt Quick TableView背景透明？设backgroundVisible: false无效

问题场景 #

需在CustomImage组件上方显示TableView的表头、列与行，已设置TableView的backgroundVisible: false属性，但背景仍未透明，无法看到下方的图片。

解决思路 #

• 自定义行代理并设置透明背景：默认行代理带有不透明背景色，仅设置表头代理和backgroundVisible不足以让整个表格透明，需显式定义rowDelegate并将其背景设为透明。
• 设置TableViewStyle的整体背景：部分QML版本中，TableViewStyle自身存在默认背景，需添加background属性并设为透明。
• 确认组件层级：确保TableView的anchors.fill: tableImg正确生效，没有被其他组件遮挡。

修改后代码示例 #

CustomImage {
    id: tableImg
    source: "qrc:/Images/tabel.svg"
    anchors {
        bottom: btnClose.top
        bottomMargin: 4
        right: slider.left
        rightMargin: 10
        left: scancardimg.left
        leftMargin: 55
        top: scancardimg.top
        topMargin: 116
    }
}

ListModel {
    id: modelCeva
    ListElement { nrCrt: "226"; joc: "fifa"; tip: "PS5"; valoare: "600"; data: "2023-04-28"; ora: "17:09:12"; }
}

TableView {
    id: tableView
    anchors.fill: tableImg
    backgroundVisible: false
    clip: true
    TableViewColumn { role: "nrCrt"; title: "Nr. Crt"; width: 70; }
    TableViewColumn { role: "joc"; title: "Joc"; width: 100; }
    TableViewColumn { role: "tip"; title: "Tip"; width: 100; }
    TableViewColumn { role: "valoare"; title: "Valoare"; width: 100; }
    TableViewColumn { role: "data"; title: "Data"; width: 100; }
    TableViewColumn { role: "ora"; title: "Ora"; width: 100; }

    model: modelCeva

    style: TableViewStyle {
        // 确保TableViewStyle整体背景透明
        background: Rectangle { color: "#00000000" }
        
        headerDelegate: Rectangle {
            height: textItem.implicitHeight * 1.2
            width: textItem.implicitWidth
            color: "#00000000";
            Text {
                id: textItem
                anchors.fill: parent
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: styleData.textAlignment
                anchors.leftMargin: 12
                text: styleData.value
                elide: Text.ElideRight
                color: "white"
                renderType: Text.NativeRendering
            }
        }
        
        // 自定义行代理，设置背景透明（选中状态可按需调整）
        rowDelegate: Rectangle {
            color: styleData.selected ? "#20ffffff" : "#00000000"
        }
    }
}

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