import { ScrollView } from "std-widgets.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; }    }}

ScrollView 包含一个比视图大且可以滚动的视口。它具有用于交互的滚动条。

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

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

属性

enabled

bool 默认：true

用于以禁用或启用的形式渲染框架，但不会更改控件的行为。

mouse-drag-pan-enabled

bool (in) 默认：true for Material style, false for all others

当为 true 时，可以通过鼠标拖动来滚动视图。

has-focus

bool (in-out) 默认：false

用于以聚焦或非聚焦的形式渲染框架，但不会更改控件的行为。

viewport-width

length (in-out) 默认：0px

ScrollView 视口的宽度。

viewport-height

length (in-out) 默认：0px

ScrollView 视口的高度。

viewport-x

length (in-out) 默认：0px

ScrollView 相对于视口的 x 位置。通常为负值。

viewport-y

length (in-out) 默认：0px

ScrollView 相对于视口的 y 位置。通常为负值。

visible-width

length (out) 默认：0px

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

visible-height

length (out) 默认：0px

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

vertical-scrollbar-policy

enum ScrollBarPolicy 默认：as-needed

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

ScrollBarPolicy

此枚举描述滚动条的可见性

• as-needed：滚动条仅在需要时可见
• always-off：滚动条从不显示
• always-on：滚动条始终可见

horizontal-scrollbar-policy

enum ScrollBarPolicy 默认：as-needed

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

ScrollBarPolicy

此枚举描述滚动条的可见性

• as-needed：滚动条仅在需要时可见
• always-off：滚动条从不显示
• always-on：滚动条始终可见

回调

scrolled()

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

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; }
    scrolled() => {        debug("viewport-x: ", self.viewport-x);        debug("viewport-y: ", self.viewport-y);    }}