ScrollView QML Type

Scrollable view. 更多...

• 所有的成员列表, 包括继承的成员

属性

• contentChildren : list<Item>
• contentData : list<Object>
• contentHeight : real
• contentWidth : real

详细描述

ScrollView provides scrolling for user-defined content. It can be used to either replace a Flickable, or to decorate an existing one.

The first example demonstrates the simplest usage of ScrollView.

  ScrollView {
      width: 200
      height: 200
      clip: true

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

Note: ScrollView does not automatically clip its contents. If it is not used as a full-screen item, you should consider setting the clip property to true, as shown above.

The second example illustrates using an existing Flickable, that is, a ListView.

  ScrollView {
      width: 200
      height: 200

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

Scroll Bars

The horizontal and vertical scroll bars can be accessed and customized using the ScrollBar.horizontal and ScrollBar.vertical attached properties. The following example adjusts the scroll bar policies so that the horizontal scroll bar is always off, and the vertical scroll bar is always on.

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

Touch vs. Mouse Interaction

On touch, ScrollView enables flicking and makes the scroll bars non-interactive.

When interacted with a mouse device, flicking is disabled and the scroll bars are interactive.

Scroll bars can be made interactive on touch, or non-interactive when interacted with a mouse device, by setting the interactive property explicitly to true or false, respectively.

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

参见 ScrollBar, ScrollIndicator, Customizing ScrollView, and Container Controls.

属性