Qt Quick - ScrollView

I. Overview

ScrollView provides scrolling functionality for user-defined content. Similar to the function of QScrollArea.

Two, use

The first example shows the simplest usage of ScrollView.

  ScrollView {
    
    
      width: 200
      height: 200
      clip: true

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

• Note: ScrollView does not automatically crop its content . If it's not being used as a fullscreen element, you should consider setting the clip property to true, as shown above.

The second example shows how to use an existing Flickable, which is a ListView.

  ScrollView {
    
    
      width: 200
      height: 200

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

4. Grading

As with Flickable, there are a few things to keep in mind when using ScrollView.

• If only a single element is used in a ScrollView, the content size will be automatically calculated based on the implicit size of the element it contains. However, if multiple element items are used (or no implicit size is provided), the contentWidth and contentHeight properties must be set to the sum of the contained element items.
• If the content size is less than or equal to the size of the scroll view, it will not be flickable and will not scroll.

Five, scroll bar control

Use Scrollbars to access and customize horizontal and vertical scrollbars. Horizontal and scroll bars. Vertical additional properties.

The following example adjusts the scrollbar policy so that horizontal scrollbars are always off and vertical scrollbars are always on.

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

Six, touch vs. mouse interaction

On touch, the ScrollView allows swiping and makes the scrollbars non-interactive.

When interacting with a mouse device, bouncing is disabled and scrollbars are interactive. I am generally sure to use this desktop for development.

By explicitly setting the interactive property to true or false, scroll bars can be interactive when touched, or non-interactive when interacting with a mouse device.

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

Seven, landscaping

Sometimes if this content appears outside the interface, you can set the background to eliminate this problem.

 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"
      }
  }