ScrollView

import { ScrollView } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 200px;
    ScrollView {
        width: 200px;
        height: 200px;
        content-width: 300px;
        content-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; }
    }
}

slint

ScrollView 显示一个视口，用于查看比可见区域更大的内容，并且可以 滚动。与普通的 Flickable 相比，它带有可交互的滚动条。

如果 content-width 和 content-height 属性 大于可见区域的大小，ScrollView 则可滚动。

如果 ScrollView 包含布局，content-width 和 content-height 的默认值是该布局的最小尺寸。

注意

ScrollView 始终会实例化其所有子元素，因此当子元素数量很大时性能可能会下降，即使它们不可见。 如果要显示一长串项，请改用 ListView，它只实例化可见的子元素。

属性

enabled

booldefault: true

用于将框架渲染为禁用或启用状态，但不改变 控件的行为。

mouse-drag-pan-enabled

bool(in)default: false

当为 true 时，可以通过用鼠标拖动来滚动视图。使用 触摸屏平移和使用鼠标滚轮滚动与此属性无关，始终可用。

has-focus

bool(in-out)default: false

用于将框架渲染为聚焦或未聚焦状态，但不改变 控件的行为。

content-width

length(in-out)default: 0px

滚动视图可滚动内容的宽度。此属性以前 称为 viewport-width，该名称仍作为已弃用的 别名可用。

content-height

length(in-out)default: 0px

滚动视图可滚动内容的高度。此属性以前 称为 viewport-height，该名称仍作为已弃用的 别名可用。

content-x

length(in-out)default: 0px

可滚动内容相对于滚动视图的 x 位置。通常 为负值。此属性以前称为 viewport-x， 该名称仍作为已弃用的别名可用。

content-y

length(in-out)default: 0px

可滚动内容相对于滚动视图的 y 位置。通常 为负值。此属性以前称为 viewport-y， 该名称仍作为已弃用的别名可用。

visible-width

length(out)

ScrollView 可见区域的宽度（不包括滚动条）

visible-height

length(out)

ScrollView 可见区域的高度（不包括滚动条）

vertical-scrollbar-policy

enum ScrollBarPolicydefault: as-needed

垂直滚动条的可见性策略。

horizontal-scrollbar-policy

enum ScrollBarPolicydefault: as-needed

水平滚动条的可见性策略。

回调

scrolled()

当 content-x 或 content-y 因用户操作（拖动、滚动）而改变时调用。

ScrollView {
    width: 200px;
    height: 200px;
    content-width: 300px;
    content-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; }

    scrolled() => {
        debug("content-x: ", self.content-x);
        debug("content-y: ", self.content-y);
    }
}

slint