Qt 在Qml中设置自定义控件的内容区域

我为QtQuick2创建了这个扩展控件 这是我的控制Qml文件：

import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.0

Item {
    property alias title: titleText.text
    property alias flowDirection: row.layoutDirection
    property alias content: innerItem
    property int headersize : 40
    property int headerheight: 50
    id: expanderItem
    clip:true
    Rectangle{
        id:contentRect
        width: expanderItem.width
        height: expanderItem.height-headersize
        radius: 10
        anchors.top: parent.top
        anchors.topMargin: headersize
        border.width: 0
        Behavior on height { NumberAnimation { duration: 250 } }
        Item{
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.topMargin: headerheight - headersize
            anchors.top: parent.top
            Item{
                anchors.fill: parent
                id: innerItem
            }
        }
    }
    Item {
        id: headerItem
        height: headerheight
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        clip: true
        Rectangle {
            id: headerRect
            anchors.fill: parent
            anchors.bottomMargin: -radius
            radius: 10
            border.width: 0
            color: "#323a45"
            Row {
                id: row
                y: 0
                height: headerheight
                layoutDirection: Qt.LeftToRight
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0
                Item {
                    id: expanderHandle
                    width: headerheight
                    height: headerheight
                    Text {
                        id: iconText
                        text: qsTr("\uea6e")
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        font.family: "IcoFont"
                        color: "white"
                        font.pixelSize: headersize
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                if(contentRect.height == 0){
                                    contentRect.height = expanderItem.height - headersize
                                    parent.text= "\uea6e"
                                }
                                else{
                                    contentRect.height = 0;
                                    parent.text= "\uea6b"
                                }
                            }
                        }
                    }
                }
                Item {
                    id: titleItem
                    width: headerRect.width-headerheight
                    height: headerheight

                    Text {
                        id: titleText
                        color: "#ffffff"
                        text: qsTr("Title")
                        font.family: "B Nazanin"
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        font.pixelSize: 15
                    }
                }
            }
        }
    }
}

在窗口中实现时：

Expander{
            id: expander
            x: 17
            y: 39
            width: 166
            height: 220
            headerheight: 50
            headersize: 40
            flowDirection: Qt.LeftToRight

            Row {
                id: row1
                height: 50
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.leftMargin: 0

                TextField {
                    id: textField2
                    width: 55
                    height: 20
                    placeholderText: qsTr("Text Field")
                }

                TextField {
                    id: textField3
                    width: 55
                    height: 20
                    placeholderText: qsTr("Text Field")
                }

                TextField {
                    id: textField4
                    width: 55
                    height: 20
                    placeholderText: qsTr("Text Field")
                }
            }

        }

我想在这个扩展器中添加的控件，在扩展器的头上放置，如下所示：

如何设置此控件的内容区域，使内部控件不需要边距？像这样：

---

您必须创建组件作为属性并使用加载器加载，而不是将项作为属性创建：

Expander.qml

---

可以用来实现我想要的功能

，但当您创建一个GroupBox时，您的内容会进入GroupBox标题下的GroupBox中，而不会显示任何内容innerItem@MoreMag你是什么意思？您尝试过我的解决方案吗？您的解决方案有效，但我要问的是类似于组框控件的东西，innerItem中的哪一行是Expander的直接子行，内容不需要margin@MoreMag不幸的是，这种逻辑只能从C++的角度进行，因此最接近的方法是使用加载程序并通过后者设置项，这很有帮助

import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.0

Item {
    property alias title: titleText.text
    property alias flowDirection: row.layoutDirection
    property int headersize : 40
    property int headerheight: 50
    property Component innerItem // <---
    id: expanderItem
    clip:true
    Rectangle{
        id:contentRect
        width: expanderItem.width
        height: expanderItem.height-headersize
        radius: 10
        anchors.top: parent.top
        anchors.topMargin: headersize
        border.width: 0
        Behavior on height { NumberAnimation { duration: 250 } }
        Item{
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.topMargin: headerheight - headersize
            anchors.top: parent.top
            Loader{ // <---
                anchors.fill: parent // <---
                sourceComponent: expanderItem.innerItem // <---
            }
        }
    }
    Item {
        id: headerItem
        height: headerheight
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        clip: true
        Rectangle {
            id: headerRect
            anchors.fill: parent
            anchors.bottomMargin: -radius
            radius: 10
            border.width: 0
            color: "#323a45"
            Row {
                id: row
                y: 0
                height: headerheight
                layoutDirection: Qt.LeftToRight
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0
                Item {
                    id: expanderHandle
                    width: headerheight
                    height: headerheight
                    Text {
                        id: iconText
                        text: qsTr("\uea6e")
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        font.family: "IcoFont"
                        color: "white"
                        font.pixelSize: headersize
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                if(contentRect.height === 0){
                                    contentRect.height = expanderItem.height - headersize
                                    parent.text= "\uea6e"
                                }
                                else{
                                    contentRect.height = 0;
                                    parent.text= "\uea6b"
                                }
                            }
                        }
                    }
                }
                Item {
                    id: titleItem
                    width: headerRect.width-headerheight
                    height: headerheight

                    Text {
                        id: titleText
                        color: "#ffffff"
                        text: qsTr("Title")
                        font.family: "B Nazanin"
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        font.pixelSize: 15
                    }
                }
            }
        }
    }
}

Expander{
    id: expander
    x: 17
    y: 39
    width: 166
    height: 220
    headerheight: 50
    headersize: 40
    flowDirection: Qt.LeftToRight
    innerItem:  Row {
        id: row1
        height: 50
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.leftMargin: 0
        TextField {
            id: textField2
            width: 55
            height: 20
            placeholderText: qsTr("Text Field")
        }
        TextField {
            id: textField3
            width: 55
            height: 20
            placeholderText: qsTr("Text Field")
        }
        TextField {
            id: textField4
            width: 55
            height: 20
            placeholderText: qsTr("Text Field")
        }
    }
}

default property alias childData : childArea.data