How to use ScrollView properly?

[KrabQT]

I have problem with ScrollView. There actually isn't much resources on web, how to use it, so i am not sure if i did it properly, but probably not, because it breaks my app layout. Check the right side (you must probably scroll). Without scrollview, there is no problem with properties inspector, but if i add scrollview, it mess my layout.

without scrollview
!http://i.stack.imgur.com/BNLsp.png(without scrollbar)!

with scrollview
!http://i.stack.imgur.com/EB0sz.png(with scrollbar)!

scrollview is defined on the tail

code
@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
        }

    }
}

}

@

[onek24]

Hey,

here is a solution to your problem:

@Rectangle [
color: "#565656"
Layout.fillheight: true
Layout.preferredWidth: 200
Layout.minimumWidth: 200
ScrollView {
anchors.fill: parent
contentItem: parent
}
}@

It has to be a child of your component to work properly. It won't work if you put it somewhere else and even set anchors.fill and contentItem to your component id.
-The value for contentItem should be an Item type which parent is.-

bq. -The id is not a property, it is a special attribute stored out-of-band to any other attributes of an object. By which I mean, it’s not resolvable via QMetaObject or the QML property caching mechanisms. Instead, the ids are (basically) stored per context, in a vector of idValues (which is basically the QObject to which the id refers the context within which it is valid).-

-The Id is a QObject which contentItem can't take as a value.-

Sorry that was false, anchors.fill also takes an Item as a value and it will work with an QObject or id in that case. I will continue my search for the answer on why it's not working. It's very late here so i might better go to bed until i post more false answers.

At least the samplecode i provided works with Qt 5.2.1.
Please try it out and tell me if it worked or not. Feel free to ask if you've got questions.

[KrabQT]

onek24: thx, actually i am beginner and i noticed i will probably need insert something like Column into Rectangle, if i want to have some content there. So i used your solution and changed scrollview.contentItem to id of that Column component and it worked nicely :) But what i don't understand is, why it doesn't work if i have anchors.fill: parent on that column component.

worked:
@Rectangle {
Layout.minimumWidth: 200
Layout.maximumHeight: 100
color: "#565656"
Column {
id: kik
Text {text:"ahoj"}
Text {text:"ahoj"}
Text {text:"ahoj"}
Text {text:"ahoj"}
Text {text:"ahoj"}
}
ScrollView {
anchors.fill: parent
contentItem: kik
}
}@

doesn't work:
@Rectangle {
Layout.minimumWidth: 200
Layout.maximumHeight: 100
color: "#565656"
Column {
id: kik
anchors.fill: parent
Text {text:"ahoj"}
Text {text:"ahoj"}
Text {text:"ahoj"}
Text {text:"ahoj"}
Text {text:"ahoj"}
}
ScrollView {
anchors.fill: parent
contentItem: kik
}
}@

[onek24]

You're welcome. Well i'm a beginner in QML and Cpp, too. :)
anchors.fill works fine with an id. The problem here was the contentItem. I'll see what i can find about the issue.

[onek24]

bq. Only one Item can be a direct child of the ScrollView and the child is implicitly anchored to fill the scroll view.

It looks like we should have it done it like:

@ScrollView {
Rectangle {
Layout.minimumWidth: 200
Layout.maximumHeight: 100
color: "#565656"
Column {
id: kik
anchors.fill: parent
Text {text:"ahoj"}
Text {text:"ahoj"}
Text {text:"ahoj"}
Text {text:"ahoj"}
Text {text:"ahoj"}
}
}
}@