ScrollView

A Scrollview contains a viewport that is bigger than the view and can be scrolled. It has scrollbar to interact with. The viewport-width and viewport-height are calculated automatically to create a scollable view except for when using a for loop to populate the elements. In that case the viewport-width and viewport-height aren't calculated automatically and must be set manually for scrolling to work. The ability to automatically calculate the viewport-width and viewport-height when using for loops may be added in the future and is tracked in issue #407.

Properties

  • enabled (in bool): Used to render the frame as disabled or enabled, but doesn't change behavior of the widget.
  • has_focus (in_out bool): Used to render the frame as focused or unfocused, but doesn't change the behavior of the widget.
  • viewport_width and viewport_height (in_out length): The width and length properties of the viewport
  • viewport_x and viewport_y (in_out length): The x and y properties of the viewport. Usually these are negative
  • visible_width and visible_height (out length): The size of the visible area of the ScrollView (not including the scrollbar)
  • interactive (in bool_): When true, the viewport can be scrolled by clicking on it and dragging it with the cursor. (default value: true)

Example

import { ScrollView } from "@coop/lib.slint";

export component Example inherits Window {
    width: 200px;
    height: 200px;
    ScrollView {
        width: 200px;
        height: 200px;
        viewport_width: 300px;
        viewport_height: 300px;
        Rectangle { width: 30px; height: 30px; x: 275px; y: 50px; background: blue; }
        Rectangle { width: 30px; height: 30px; x: 175px; y: 130px; background: red; }
        Rectangle { width: 30px; height: 30px; x: 25px; y: 210px; background: yellow; }
        Rectangle { width: 30px; height: 30px; x: 98px; y: 55px; background: orange; }
    }
}