Настройка области содержимого пользовательских элементов управления в Qml - PullRequest
Новая
       10

Настройка области содержимого пользовательских элементов управления в Qml

0 голосов
/ 20 ноября 2018

Я создал этот элемент управления Expander для 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")
                }
            }

        }

Элементы управления, которые я хочу добавить внутри этого экспандера, перетаскивают заголовок экспандера следующим образом:

ScreenShot

как я могу установить область содержимого для этого элемента управления, чтобы внутренние элементы управления не нуждались в поле? как это:

ScreenShot

Ответы [ 2 ]

0 голосов
/ 07 августа 2019 
default property alias childData : childArea.data

можно использовать для достижения того, что я ищу

0 голосов
/ 20 ноября 2018

Вместо создания элемента как свойства вы должны создать компонент как свойство и загрузить его с загрузчиком:

Expander.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 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
                    }
                }
            }
        }
    }
}

*. qml 

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")
        }
    }
}
...