一、概述

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

二、使用

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

  ScrollView {
      width: 200
      height: 200
      clip: true

      Label {
          text: "ABC"
          font.pixelSize: 224
      }
  }

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

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

  ScrollView {
      width: 200
      height: 200

      ListView {
          model: 20
          delegate: ItemDelegate {
              text: "Item " + index
          }
      }
  }

四、分级

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

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

五、滚动条控制

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

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

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

六、触摸vs.鼠标交互

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

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

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

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

七、美化

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

 ScrollView {
      id: control

      width: 200
      height: 200
      focus: true

      Label {
          text: "ABC"
          font.pixelSize: 224
      }

      ScrollBar.vertical: ScrollBar {
          parent: control
          x: control.mirrored ? 0 : control.width - width
          y: control.topPadding
          height: control.availableHeight
          active: control.ScrollBar.horizontal.active
      }

      ScrollBar.horizontal: ScrollBar {
          parent: control
          x: control.leftPadding
          y: control.height - height
          width: control.availableWidth
          active: control.ScrollBar.vertical.active
      }

      background: Rectangle {
          border.color: control.activeFocus ? "#21be2b" : "#bdbebf"
      }
  }