[英]How to scroll QML ScrollView to center?
I have code like this:我有这样的代码:
ScrollView {
Image {
source: "..."
}
}
Image
is higher than the ScrollView
. Image
高于ScrollView
。 How can I scroll the latter to the center of Image
element?如何将后者滚动到Image
元素的中心?
Despite the appearence, ScrollView
is tightly related to Flickable
.尽管出现, ScrollView
与Flickable
密切相关。 Indeed, Flickable
is used to control the visible area.事实上, Flickable
是用来控制可见区域的。 Such an Item
is available as the ( readonly
) property flickableItem
.这样的Item
可用作( readonly
)属性flickableItem
。 Flickable
has the contentX
and contentY
properties to control the current visible area. Flickable
具有contentX
和contentY
属性来控制当前可见区域。 These properties can be combined with the width
and height
of the ScrollView
to position the visible area exactly at the center.这些属性可以与ScrollView
的width
和height
结合,以将可见区域精确定位在中心。 Typically you have:通常你有:
flickableItem.contentY = flickableItem.contentHeight / 2 - height / 2
flickableItem.contentX = flickableItem.contentWidth / 2 - width / 2
The difference is necessary since the first calls just moves the center to the top left point of the visible area (where contentX
/ contentY
are located).所不同的是必要的,因为第一个电话只是移动中心可视区域(其中左上角点contentX
/ contentY
所在)。
Here is a complete example with an Image
as main child of the ScrollView
.这是一个完整的示例,其中Image
作为ScrollView
主要子项。
Disclaimer : In the simple scenario proposed by the example, with a remotelly loaded image, sizes can still be unset when onCompleted
is called, resulting in a centering code that doesn't work.免责声明:在示例提出的简单场景中,对于远程加载的图像,在调用onCompleted
时仍然可以取消设置大小,从而导致居中代码不起作用。 By setting widths and heigths directly into code the problem is avoided.通过将宽度和高度直接设置到代码中,可以避免该问题。 In a real scenario such detail should be unnecessary.在真实场景中,这样的细节应该是不必要的。
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
Window {
id: main
visible: true
width: 600; height: 350
ScrollView {
id: ss
width: 600
height: 350
Image {
id: name
width: 900
height: 600
source: "http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"
}
Component.onCompleted: {
flickableItem.contentY = flickableItem.contentHeight / 2 - height / 2
flickableItem.contentX = flickableItem.contentWidth / 2 - width / 2
}
}
}
Here is a solution for QQC2.这是QQC2的解决方案。 Tested on Qt 5.12.在 Qt 5.12 上测试。
The solution is simple, just store the scrollBar pointer and control it however you want.解决方案很简单,只需存储滚动条指针并根据需要对其进行控制。
ScrollView2.qml ScrollView2.qml
import QtQuick 2.0
import QtQuick.Controls 2.4
ScrollView {
id: root
property ScrollBar hScrollBar: ScrollBar.horizontal
property ScrollBar vScrollBar: ScrollBar.vertical
/**
* @param type [Qt.Horizontal, Qt.Vertical]
* @param ratio 0.0 to 1.0
*/
function scrollTo(type, ratio) {
var scrollFunc = function (bar, ratio) {
bar.setPosition(ratio - bar.size/2)
}
switch(type) {
case Qt.Horizontal:
scrollFunc(root.hScrollBar, ratio)
break;
case Qt.Vertical:
scrollFunc(root.vScrollBar, ratio)
break;
}
}
}
main.qml主文件
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 500
height: 500
ScrollView2 {
id: scroll
anchors.fill: parent
Text {
width: 1000
height: 1000
text: "ABC"
font.pixelSize: 800
Component.onCompleted: {
scroll.scrollTo(Qt.Horizontal, 0.5)
scroll.scrollTo(Qt.Vertical, 0.5)
}
}
}
}
Since Qt 5.14 (maybe already in 5.12) you can now simply do:从 Qt 5.14(也许已经在 5.12 中)开始,您现在可以简单地执行以下操作:
ScrollView {
Component.onCompleted {
// scroll to vertical center
ScrollBar.vertical.position = 0.5
}
// put your content item here:
Image {
// …
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.