How to use ScrollView properly?



  • 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
            }
    
        }
    }
    

    }

    @



  • 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.



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



  • 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.



  • 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"}
    }
    }
    }@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.