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.1ApplicationWindow {
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"}
}
}
}@