QML: Как сделать рамку у ListView с закруглениями + рамка?

Question

Как вариант можно ListView разместить в Rectangle с отступом в ширину рамок, но так делегаты будут поверх рамки, и будут скрывать рамку по углам закругления:

Rectangle {
    id: root

    property alias delegate: lv.delegate
    property alias model: lv.model

    color: Theme.listBg
    border {
        color: Theme.borderColor
        width: 1
    }
    radius: 20
    layer.enabled: true
    layer.effect: OpacityMask {
        maskSource: Rectangle {
            width: root.width
            height: root.height
            radius: root.radius
        }
    }

    ListView {
        id: lv
        anchors {
            fill: parent
            margins: parent.border.width
        }
        focus: true
        clip: true

        ScrollBar.vertical: ScrollBar { }
    }
}

У меня получается так:

Answer 1

Наверное, самый простой способ - добавить рамку отдельным не дочерним прямоугольником:

Rectangle {
    id: root
    //убрать рамку у прямоугольника
    //...
        ListView {
        id: lv
        anchors {
            fill: parent
            //убрать отступы, либо заменить parent на borderRect:
            //margins: borderRect.border.width
        }
        //...
}

Rectangle {
    id: borderRect

    anchors.fill: root

    color: Qt.rgba(0, 0, 0, 0) //если рамка не будет отображаться, то можно чуть увеличить непрозрачность
    radius: root.radius
    border
    {
        color: Theme.borderColor
        width: 1
    }
}

БЛОГ НА HUSL

QML: Как сделать рамку у ListView с закруглениями + рамка?

Ответы (1 шт):