I have created a QML component that allows data to be displayed in a stylized rectangle, which can be collapsed using a button. The appearance of the rectangle and its properties are exactly what I want, but I would like the border of the rectangle to clip over the content when the data provided to the component is displayed, without the border clipping over the Name Label and the button used to show or hide data.

Here’s an example with the following code:

MyCustomComponent.qml :

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Rectangle {
    id: rect
    height: displayData === true ? childrenRect.height + 5 : 30
    implicitHeight: height
    radius: 10
    border.width: 2
    border.color: "black"
    color: "transparent"
    //If clip = true on this Rectangle, the content will effectively be clipped, but the nameLabel and showContentButton will also be clipped, and I want to avoid that
    // clip: true
    
    property alias name: nameLabel.text
    property bool displayData: true
    
    //Name Label
    Rectangle {
        anchors.left: rect.left
        anchors.verticalCenter: rect.top
        anchors.leftMargin: 10
        height: childrenRect.height
        width: childrenRect.width + 10
        color: "white"
        radius: 100
        
        Label {
            id: nameLabel
            anchors.left: parent.left
            anchors.centerIn: parent
            clip: true
            color: "black"
            font.family: "Arial"
            font.pointSize: 12
        }
    }
    
    //Hide/Show Data Button
    RoundButton {
        id: showContentButton
        anchors.right: rect.right
        anchors.verticalCenter: rect.top
        anchors.rightMargin: 10
        padding: 0
        radius: 100
        height: 25
        width: 25
        
        Text {
            anchors.centerIn: parent
            text: displayData ? "+" : "-"
        }
        
        background: Rectangle {
            anchors.fill: parent
            radius: 100
            color: "white"
        }
        
        MouseArea {
            anchors.fill: parent
            onClicked: {
                displayData = !displayData
            }
        }
    }
    
    //Hide/Show Data Animation
    Behavior on height {
        NumberAnimation {
            duration: 600
            easing.type: Easing.InOutQuad
        }
    }
}

main.qml :

import QtQuick 2.2
import QtQuick.Controls 2.15
import QtQuick.Controls 1.4
import QtQuick.Controls 2.4
import QtQuick.Dialogs 1.1
import QtQuick.Layouts 1.11

Item {
    ColumnLayout {
        anchors.fill: parent

        MyCustomComponent {
            Layout.fillWidth: true
            Layout.margins: 10
            name: "Default Name For Tests"

            //Everything contained by this ColumnLayout should be clipped by the frame border, especially when the "Hide/Show Data Animation" is played
            ColumnLayout {
                anchors {
                    left: parent.left
                    leftMargin: 10
                    right: parent.right
                    rightMargin: 10
                    top: parent.top
                    topMargin: 15
                }
                visible: parent.displayData

                RowLayout {
                    Layout.fillWidth: true
                    ColumnLayout {
                        Layout.fillWidth: true
                        spacing: 2
                        Text {
                            font.family: "Arial"
                            color: "grey"
                            font.pixelSize: 10
                            text: "Text Field 1"
                        }
                        TextField {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 30
                        }
                    }
                }

                RowLayout {
                    Layout.fillWidth: true
                    ColumnLayout {
                        Layout.fillWidth: true
                        spacing: 2
                        Text {
                            font.family: "Arial"
                            color: "grey"
                            font.pixelSize: 10
                            text: "Text Field 2"
                        }
                        TextField {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 30
                        }
                    }
                }

                RowLayout {
                    Layout.fillWidth: true
                    ColumnLayout {
                        Layout.fillWidth: true
                        spacing: 2
                        Text {
                            font.family: "Arial"
                            color: "grey"
                            font.pixelSize: 10
                            text: "Text Field 3"
                        }
                        TextField {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 30
                        }
                    }
                }
            }
        }
    }
}

Thanks !