Qt quick controls ScrollView

Question

I didn't found any good resource how to use this component and it still fails layout of my app (check that right properties inspector). What i did wrong?

without ScrollView

with ScrollView

scroll that code down please, the scrollview is defined last

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.1

ApplicationWindow {
    title: qsTr("Hello World")
    width: 1400
    height: 800
    color: "#414141"

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    ColumnLayout {

        anchors.fill: parent

        Rectangle {
            color: "#414141"
            Layout.fillWidth: true
            Layout.preferredHeight: 50
            MyLabel {
                text: "Toolbar"
            }
        }

        SplitView {

            Layout.fillHeight: true
            Layout.fillWidth: true
            orientation: Qt.Horizontal
            handleDelegate: MyVSlider {}

            SplitView {

                Layout.fillHeight: true
                Layout.fillWidth: true
                orientation: Qt.Vertical
                handleDelegate: MyHSlider {}

                SplitView {
                    handleDelegate: MyVSlider {}
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    orientation: Qt.Horizontal

                    Rectangle {
                        color: "#565656"
                        Layout.fillHeight: true
                        Layout.preferredWidth: 200
                        Layout.minimumWidth: 200
                        MyLabel {
                            text: "Tree view"
                        }
                    }

                    Rectangle {
                        color: "#565656"
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                        Layout.minimumWidth: 500
                        Layout.preferredHeight: 300
                        MyLabel {
                            text: "Scene view"
                        }
                    }
                }

                Rectangle {
                    color: "#565656"
                    Layout.fillWidth: true
                    Layout.preferredHeight: 200
                    Layout.minimumHeight: 200
                    MyLabel {
                        text: "Console output"
                    }
                }
            }

            Rectangle {
                id: inspector
                color: "#565656"
                Layout.fillHeight: true
                Layout.preferredWidth: 200
                Layout.minimumWidth: 200
                MyLabel {
                    text: "Properties inspector"
                }
            }


            ScrollView {
                contentItem: inspector
            }

        }
    }

}

Answer 1

Are you trying to get your inspector element to be scrollable? You'll want to put the element to be scrolled within the the ScrollView.

i.e.

ScrollView {
    Rectangle {
            id: inspector
            color: "#565656"
            Layout.fillHeight: true
            Layout.preferredWidth: 200
            Layout.minimumWidth: 200
            MyLabel {
                text: "Properties inspector"
            }

            // Make the thing really big.
            width: 1000
            height: 1000
    }
}

This will cause your inspector to show up with scroll bars if you set the width and height as I did above.