Am I missing something or this is the way to create custom control/component

Question

In my Card.qml, I've these:

import QtQuick 2.9
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3

Item {
    default property alias content: x.children /*contentItem.data*/
    property alias header: header.text

    Rectangle{
        id: rect
        anchors.fill: parent
        ColumnLayout{
            anchors.fill: parent
            Text{
                id: header
                font.bold: true
                leftPadding: 10
                topPadding: 10
            }
            Rectangle{
                Layout.fillWidth: true
                Layout.leftMargin: 5
                Layout.rightMargin: 5
                height: 2
                border.color: "black"
            }
            Item {
                id: x
                Layout.margins: 10
                Layout.topMargin: 0
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
        }
    }
    DropShadow{
        anchors.fill: rect
        source: rect
        radius: 10
        samples: 15
        color: "black"
    }
}

in Field.qml these:

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Item {
    id: root
    property alias label: label.text
    property alias placeholder: field.placeholderText

    RowLayout{
        anchors.fill: root
        Label{
            id: label
            Layout.minimumWidth: 50
        }
        TextField{
            id: field
        }
    }
}

and in main.qml these:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: "Test Window"

    GridLayout{
        anchors.fill: parent
        columns: 2
        rows: 2
        Card{      
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.margins: 10
            header: "H1"
            Text{text: "text 1"}
        }
        Card{
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.margins: 10
            header: "H2"
            Text{text: "text 2"}
        }
        Card{
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.margins: 10
            header: "H3"
            Text{text: "text 3"}
        }
        Card{
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.margins: 10
            header: "H4"
            ColumnLayout{
                Field{
                    label: "Name"
                    placeholder: "name"
                }
                Field{
                    label: "Age"
                    placeholder: "age"
                }
                /*
                TextField{}
                TextField{}
                */
            }
        }
    }
}

when I run the application it looks like this:

First problem is the last Field on the 4th Card is on top of first Field, why? Second, in every Card I've to have these for it to render properly:

Layout.fillHeight: true
Layout.fillWidth: true
Layout.margins: 10

I could put these 3 lines in Card.qml BUT in that case I probably would always have to use that in some Layout, right?

Third in Card.qml, in the 1st Rectangle although I've anchors.fill: parent, I again have to have anchors.fill: parent in the ColumnLayout inside that, why?

I couldn't find a Separator control in QML so I'd to use another Rectangle there with height: 2. I wanted to make that separating Rectangle thinner so I put height: 1 and it doesn't even appear on the Window with height: 1!

Though I've already mentioned twice that anchors.fill: parent in root Rectangle and ColumnLayout inside it, I again have to have Layout.fillWidth: true in separating Rectangle and content Item.

Am I laying out things properly in QML or there's easier way to do?

Answer 1

New definition of Field:

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

RowLayout{
    property alias label: label.text
    property alias placeholder: field.placeholderText

    Label{
        id: label
        Layout.minimumWidth: 50
    }
    TextField{
        id: field
        Layout.fillWidth: true
    }
}

solves the overlapping issue and it actually makes sense: Label tells the RowLayout to give it at least 50 pt/px/whatever and the TextField orders it to allocate the remaining width.

I've brought these lines

Layout.fillHeight: true
Layout.fillWidth: true
Layout.margins: 10

in the Card definition:

import QtQuick 2.9
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3

Item {
    default property alias content: content.children /*content.data*/
    property alias header: header.text
    property double margin: 10
    property double separatorMargin: 5

    Layout.fillHeight: true
    Layout.fillWidth: true
    Layout.margins: 10

    Rectangle{
        id: rect
        anchors.fill: parent
        ColumnLayout{
            anchors.fill: parent
            Text{
                id: header
                font.bold: true
                leftPadding: margin
                topPadding: margin
                //Layout.alignment: Qt.AlignTop
            }
            Rectangle{
                id: separator
                Layout.fillWidth: true
                Layout.leftMargin: separatorMargin
                Layout.rightMargin: separatorMargin
                height: 2
                border.color: "black"
                //anchors.top: header.bottom
            }
            ColumnLayout {
                id: content
                Layout.leftMargin: margin
                Layout.rightMargin: margin
                Layout.fillHeight: true
                Layout.fillWidth: true
                //anchors.top: separator.bottom
            }
        }
    }
    DropShadow{
        anchors.fill: rect
        source: rect
        radius: 10
        samples: 15
        color: "black"
    }
}

and I'm still lost in this. In the first ColumnLayout, the line anchors.fill: parent tells it to occupy the whole area of rect, right? AND isn't the second ColumnLayout (id: content) with Layout.fillHeight: true telling the content to fill the remaining height of the first ColumnLayout? Here's how it looks now:

Although I've Layout.fillHeight: true in ColumnLayout (id: content), the root ColumnLayout doesn't care! It evenly distributes the whole space between Text (header), Rectangle (separator) and ColumnLayout (content), why? Am I still missing something?

Here's the content of main.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: "Test Window"

    GridLayout{
        anchors.fill: parent
        columns: 2
        rows: 2

        Card{
            header: "H1"
            Text{text: "text 1"}
        }
        Card{
            header: "H2"
            Text{text: "text 2"}
        }
        Card{
            header: "H3"
            RowLayout{
                Field{
                    label: "Name"
                    placeholder: "name"
                }
                Field{
                    label: "Age"
                    placeholder: "age"
                }
            }
        }
        Card{
            header: "H4"
            ColumnLayout{
                Field{
                    label: "Name"
                    placeholder: "name"
                }
                Field{
                    label: "Age"
                    placeholder: "age"
                }
                Field{
                    label: "Address"
                    placeholder: "address"
                }
                Field{
                    label: "Age"
                    placeholder: "age"
                }
                Field{
                    label: "Address"
                    placeholder: "address"
                }
            }
        }
    }
}

EDIT

I've to give that ColumnLayout (content) an exact or much bigger height to solve the issue! this definition:

ColumnLayout {
    id: content
    Layout.preferredHeight: parent.height
    Layout.leftMargin: margin
    Layout.rightMargin: margin
    //Layout.alignment: Qt.AlignTop
}

let it occupy the available space. Problem now is the content inside it is vertically centered.

I've tried with two other container Item and Flow BUT none of those resize its content on Window size change.

Are GridLayout, ColumLayOut and RowLayout the only Layouts that respond to Window size change?

EDIT

StackLayout instead of ColumnLayout for content solves the problem!