How can I inherit from another QML & add content to parent Scrollview

KidTrent

I've made a BaseFormDialog.qml that many other CustomFormDialog.qml files will inherit from. I want to be able to essentially inherit BaseFormDialog and then insert children items into a ScrollView that is inside BaseFormDialog. The insert is done from each CustomFormDialog.qml file.

The problem is when the children are inserted, they don't appear to be inside of the ScrollView. That is to say, the scroll feature is not changed and the items are always visible, even beyond the ScrollView height.

What am I doing wrong, how can I fix this?

Here is a picture of the result and the code that produces it...
QDialog Inheriting

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.15

Window {
    CustomFormDialog {
        id: dialog
        onAccepted: function() {
            console.log("Accepted");
        }
    }

    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Button {
        id: openBtn
        text: "Open Dialog"
        onClicked: {
            dialog.open();
        }
    }
}

BaseFormDialog.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

Dialog {
    property alias dialogTitle: optionText.text
    default property alias dialogContent: scrollView.children
    property alias saveBtn: saveBtn

    id: root
    width: 500
    height: 300

    contentItem: Rectangle {
        id: delegate
        color: theme.transparent
        border {
            width: 2
            color: "black"
        }

        Column {
            anchors.fill: parent
            anchors.margins: 10

            Text {
                id: optionText
                width: parent.width
                color: "black"
                font {
                    bold: true
                    capitalization: Font.AllUppercase
                    pixelSize: 16
                }
            }

            Rectangle {
                id: horizontalDivider
                width: parent.width
                height: 3
                color: "black"
            }

            ScrollView {
                id: scrollView
                width: parent.width
                height: parent.height - optionText.height - horizontalDivider.height - btnsContainer.height
                topPadding: 5
                rightPadding: 10
                ScrollBar.vertical.policy: ScrollBar.AlwaysOn
                ScrollBar.vertical.anchors.left: scrollView.right
            }

            Item {
                id: btnsContainer
                width: parent.width
                height: childrenRect.height

                Button {
                    id: cancelBtn
                    text: "Cancel"
                    anchors.right: saveBtn.left
                    onClicked: reject();
                }

                Button {
                    id: saveBtn
                    text: "Save"
                    anchors.right: parent.right
                    onClicked: accept();
                }
            }
        }
    }
}

CustomFormDialog.qml

import QtQuick 2.12
import QtQuick.Controls 2.12

BaseFormDialog {
    dialogTitle: "Custom Dialog"
    dialogContent: Column {
        width: parent.width
        height: childrenRect.height
        spacing: 3


        Rectangle {
            width: parent.width
            height: 100
            color: "red"
        }
        Rectangle {
            width: parent.width
            height: 100
            color: "green"
        }
        Rectangle {
            width: parent.width
            height: 100
            color: "red"
        }
        Rectangle {
            width: parent.width
            height: 100
            color: "green"
        }
        Rectangle {
            width: parent.width
            height: 100
            color: "red"
        }
        Rectangle {
            width: parent.width
            height: 100
            color: "green"
        }
        Rectangle {
            width: parent.width
            height: 100
            color: "red"
        }
        Rectangle {
            width: parent.width
            height: 100
            color: "green"
        }
    }
}

KidTrent

@KidTrent said in How can I inherit from another QML & add content to parent Scrollview:

default property alias dialogContent: scrollView.children

Solved this by making the following changes to BaseFormDialog.qml...

Change

default property alias dialogContent: scrollView.children

to

default property alias dialogContent: scrollView.contentChildren

Inside of ScrollView, add this...

clip: true