一、概述

ScrollView 为用户定义的内容提供滚动功能。类似QScrollArea 的功能。

二、使用

第一个例子展示了ScrollView的最简单用法。

  ScrollView {width: 200height: 200clip: trueLabel {text: "ABC"font.pixelSize: 224}}

• 注意：ScrollView不会自动裁剪它的内容。如果它没有被用作全屏元素，你应该考虑将clip属性设置为true，如上所示。

第二个示例说明如何使用现有的Flickable，也就是ListView。

  ScrollView {width: 200height: 200ListView {model: 20delegate: ItemDelegate {text: "Item " + index}}}

四、分级

与Flickable一样，使用ScrollView时也要注意以下几点。

• 如果在ScrollView中只使用单个元素，内容大小将自动根据其包含的元素的隐式大小计算。但是，如果使用了多个元素项(或者没有提供隐式大小)，则必须将contentWidth和contentHeight属性设置为所包含元素项的总和。
• 如果内容大小小于或等于滚动视图的大小，它将是不可flickable的不会出现滚动的意思。

五、滚动条控制

使用滚动条可以访问和定制水平和垂直滚动条。水平和滚动条。垂直附加属性。

下面的示例调整滚动条策略，使水平滚动条始终关闭，垂直滚动条始终打开。

  ScrollView {// ...ScrollBar.horizontal.policy: ScrollBar.AlwaysOffScrollBar.vertical.policy: ScrollBar.AlwaysOn}

六、触摸vs.鼠标交互

在触摸时，ScrollView允许滑动，并使滚动条非交互式。

当与鼠标设备交互时，弹动是禁用的，滚动条是交互式的。我一般肯定是用这个桌面开发的。

通过显式地将interactive属性设置为true或false，滚动条可以在触摸时实现交互，也可以在与鼠标设备交互时实现非交互。

  ScrollView {// ...ScrollBar.horizontal.interactive: trueScrollBar.vertical.interactive: true}

七、美化

有时候这个内容如果出现在界面外，就可以设置background来消除这个问题。

 ScrollView {id: controlwidth: 200height: 200focus: trueLabel {text: "ABC"font.pixelSize: 224}ScrollBar.vertical: ScrollBar {parent: controlx: control.mirrored ? 0 : control.width - widthy: control.topPaddingheight: control.availableHeightactive: control.ScrollBar.horizontal.active}ScrollBar.horizontal: ScrollBar {parent: controlx: control.leftPaddingy: control.height - heightwidth: control.availableWidthactive: control.ScrollBar.vertical.active}background: Rectangle {border.color: control.activeFocus ? "#21be2b" : "#bdbebf"}}