Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,8 @@ uv.lock
.python-version

MODULE.bazel.lock

# Auto-generated by slint-doc-generator
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is also a docs/astro/.gitignore i'd say it belongs there

docs/astro/src/content/collections/enums/
docs/astro/src/content/collections/structs/
docs/astro/src/content/docs/reference/global-structs-enums.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@ description: ListView api.
import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import Link from '@slint/common-files/src/components/Link.astro';

A ListView is like a Scrollview but it should have a `for` element, and the content are
A ListView is like a <Link type="ScrollView"/> but it should have a `for` element, and the contents are
automatically laid out in a list.
Elements are only instantiated if they are visible

In a ListView, elements are only instantiated if they are visible, which guarantees stable performance with a practically unlimited number of items.
For this reason, prefer ListView to display long lists of items.
<Link type="ScrollView"/> is more suitable for a small number of items or for free-form content.
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it more suitable for a small number of items?
You can have a ListView with few items it still is more suited as it does the layout for us.
I'd leave that out.


<CodeSnippetMD imagePath="/src/assets/generated/std-widgets-listview-example.png" imageWidth="200" imageHeight="200" imageAlt='listview example'>
```slint playground
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ description: ScrollView api.

import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import Link from '@slint/common-files/src/components/Link.astro';

<CodeSnippetMD imagePath="/src/assets/generated/std-widgets-scrollview.png" imageWidth="200" imageHeight="200" imageAlt='scrollview example'>
```slint playground
Expand All @@ -27,14 +28,19 @@ export component Example inherits Window {
</CodeSnippetMD>

A Scrollview contains a viewport that is bigger than the view and can be
scrolled. It has scrollbar to interact with.
scrolled. Compared to a plain <Link type="Flickable"/> it has scrollbar to interact with.

The ScrollView is scrollable if the `viewport-width` and `viewport-height` properties
are bigger than the size of the visible area.

If the ScrollView contains a layout, the default value for the `viewport-width` and
`viewport-height` is the minimum size of that layout.

:::note{Note}
A ScrollView will always instantiate all of its children, so its performance may degrade with large number of children, even if they are not visible.
If you want to display a long list of items, use a <Link type="ListView"/> instead, which only instantiates visible children.
:::

## Properties

### enabled
Expand Down
13 changes: 8 additions & 5 deletions internal/compiler/builtins.slint
Original file line number Diff line number Diff line change
Expand Up @@ -923,19 +923,22 @@ component KeyBinding {
/// ```
///
/// The `Flickable` is a low-level element that is the base for scrollable
/// widgets, such as the <Link type="ScrollView"/>. When the `viewport-width` or the
/// `viewport-height` is greater than the parent's `width` or `height`
/// respectively, the element becomes scrollable. Note that the `Flickable`
/// doesn't create a scrollbar. When unset, the `viewport-width` and `viewport-height` are
/// widgets, such as the <Link type="ScrollView"/> or <Link type="ListView"/>.
/// When the `viewport-width` or the `viewport-height` is greater than the parent's `width` or `height`
/// respectively, the element becomes scrollable.
///
/// When unset, the `viewport-width` and `viewport-height` are
/// calculated automatically based on the `Flickable`'s children. This isn't the
/// case when using a `for` loop to populate the elements. This is a bug tracked in
/// issue [#407](https://github.com/slint-ui/slint/issues/407).
/// The maximum and preferred size of the `Flickable` are based on the viewport.
///
/// Note that the `Flickable` doesn't create a scrollbar.
/// You can use a <Link type="ScrollView"/> instead or add your own scroll bars.
///
/// When not part of a layout, its width or height defaults to 100% of the parent
/// element when not specified.
///
///
/// ## Pointer Event Interaction
///
/// If the `Flickable`'s area contains elements that use `TouchArea` to act on clicking, such as `Button`
Expand Down
Loading