import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    Item {
        ColumnLayout {
            Button {
                id: click
                text: "Click me"

                onClicked: {  Qt.createQmlObject('import QtQuick 2.0; import QtQuick.Layouts 1.0;
                                                    Rectangle { id: rect; border.width: 1; color: "yellow"; Layout.preferredHeight: 100;
                                                                Layout.fillWidth: true; Layout.fillHeight: true }', splitter); }
            }
            Rectangle {
                width: 600
                height: 500
                SplitView {
                    id: splitter
                    orientation: Qt.Vertical
                    anchors.fill: parent
                    ColumnLayout {
                        Layout.fillHeight: false
                        Layout.preferredHeight: 100 + view.height

                        RowLayout {
                            ColumnLayout {
                                Rectangle { height: 50; color: "red"; Layout.fillWidth: true }
                                Rectangle { height: 50; color: "blue"; Layout.fillWidth: true }
                                ListModel {
                                    id: fruitModel

                                    ListElement {
                                        name: "Apple"
                                        cost: 2.45
                                    }
                                    ListElement {
                                        name: "Orange"
                                        cost: 3.25
                                    }
                                    ListElement {
                                        name: "Banana"
                                        cost: 1.95
                                    }
                                }

                                Component {
                                    id: fruitDelegate
                                    Row {
                                        spacing: 10
                                        Text { text: name }
                                        Text { text: '$' + cost }
                                    }
                                }

                                ListView {
                                    id: view; clip: true; focus: true
                                    model: fruitModel
                                    Layout.fillWidth: true
                                    Layout.fillHeight: true
                                    delegate: fruitDelegate
                                }
                                Layout.fillWidth: true
                            }
                            Loader {
                                // for optional content typically set by subclasser of this whole thing (view)
                                Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
                            }
                            Layout.fillHeight: true
                        }

                        Loader {
                            // more optional content
                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                        }
                    }
                }
            }
        }
    }
}