[英]QML ScrollView does not scroll
I need to create a long form using QML. 我需要使用QML创建一个长格式。 The form will not fit inside the window, so I need for it to be scrollable. 该窗体将无法放入窗口内,因此我需要使其可滚动。 However I can't get the scroll view to work. 但是我无法使滚动视图起作用。 Here is a minimum working example of my problem: 这是我的问题的最小工作示例:
import QtQuick.Window 2.2
import QtQuick 2.9
import QtQuick.Controls 2.3
Window {
visible: true
width: 1280
height: 720
title: qsTr("Hello World")
Rectangle{
anchors.centerIn: parent
width: parent.width*0.8;
height: parent.height*0.7;
ScrollView {
anchors.fill: parent
clip: true
contentHeight: parent.height
Rectangle{
id: rect1
width: parent.width
height: 200
color: "#ffff00"
anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect2
width: parent.width
height: 500
color: "#ff00ff"
anchors.top: rect1.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect3
width: parent.width
height: 500
color: "#00ffff"
anchors.top: rect2.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
As I understand it, this should allow me to scroll in order to see the 3 rectangles. 据我了解,这应该允许我滚动才能看到3个矩形。 However I only the see the first one and the upper half of the second one and I can't scroll. 但是,我只看到第一个和第二个的上半部分,因此无法滚动。
Any help would be greatly appriciated 任何帮助将不胜感激
将scrollview的高度和宽度设置为childs高度的总和!
Because your ScrollView contains multiple items you need to take care of sizing yourself and set contentHeight explicitly to the combined height of all the items. 由于ScrollView包含多个项目,因此您需要调整自己的大小 ,并将contentHeight显式设置为所有项目的组合高度。
For testing, you can set vertical scrollbar always on to see how content height affects the scrollbar. 为了进行测试,可以将垂直滚动条始终设置为打开,以查看内容高度如何影响滚动条。
I commented out horizontal center anchoring because it is not needed (width of your rectangles is scrollview width). 我注释掉了水平中心锚点,因为它不是必需的(矩形的宽度是scrollview的宽度)。
ScrollView {
anchors.fill: parent
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
contentHeight: rect1.height+rect2.height+rect3.height
Rectangle{
id: rect1
width: parent.width
height: 200
color: "#ffff00"
//anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect2
width: parent.width
height: 500
color: "#ff00ff"
anchors.top: rect1.bottom
//anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect3
width: parent.width
height: 500
color: "#00ffff"
anchors.top: rect2.bottom
//anchors.horizontalCenter: parent.horizontalCenter
}
}
If you wrap your rectangles with an item and set item implicitHeight
to its height ScrollView detects the contentHeight correctly. 如果用项目包裹矩形并将项目implicitHeight
高度设置为其高度,则ScrollView会正确检测到contentHeight。
ScrollView {
anchors.fill: parent
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
Item {
width: parent.width
height: rect1.height+rect2.height+rect3.height
implicitHeight: height
Rectangle{
id: rect1
width: parent.width
height: 200
color: "#ffff00"
}
Rectangle{
id: rect2
width: parent.width
height: 500
color: "#ff00ff"
anchors.top: rect1.bottom
}
Rectangle{
id: rect3
width: parent.width
height: 500
color: "#00ffff"
anchors.top: rect2.bottom
}
}
}
The default implicit size for most items is 0x0, that's why you have to set implicit height for the item explicitly. 大多数项目的默认隐式大小为0x0,这就是为什么必须显式设置项目的隐式高度的原因。 However some items have an inherent implicit size, eg Image and Text. 但是,某些项目具有固有的隐式大小,例如图像和文本。 This means that if you place eg TextArea into your ScrollView it will automatically become scrollable if text is long enough. 这意味着如果将TextArea放置到ScrollView中,则如果文本足够长,它将自动变为可滚动的。
ScrollView {
anchors.fill: parent
clip: true
TextArea {
readOnly: true
text: online ? provider.loadedText : "Offline"
wrapMode: Text.WordWrap
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.