[英]QML ScrollView does not scroll
我需要使用QML创建一个长格式。 该窗体将无法放入窗口内,因此我需要使其可滚动。 但是我无法使滚动视图起作用。 这是我的问题的最小工作示例:
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
}
}
}
}
据我了解,这应该允许我滚动才能看到3个矩形。 但是,我只看到第一个和第二个的上半部分,因此无法滚动。
任何帮助将不胜感激
将scrollview的高度和宽度设置为childs高度的总和!
由于ScrollView包含多个项目,因此您需要调整自己的大小 ,并将contentHeight显式设置为所有项目的组合高度。
为了进行测试,可以将垂直滚动条始终设置为打开,以查看内容高度如何影响滚动条。
我注释掉了水平中心锚点,因为它不是必需的(矩形的宽度是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
}
}
如果用项目包裹矩形并将项目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
}
}
}
大多数项目的默认隐式大小为0x0,这就是为什么必须显式设置项目的隐式高度的原因。 但是,某些项目具有固有的隐式大小,例如图像和文本。 这意味着如果将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.