vivi 0.2 reference

ListView

A ListView is like a ScrollView but it should have a for element, and the content are automatically laid out in a list. Elements are only instantiated if they are visible.

Properties

• style (in ScrollBarStyle): Defines the style of the scroll view.
• 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)

Example

import { ListView } from "@vivi/magic.slint";
export component Example inherits Window {
    width: 150px;
    height: 150px;
    ListView {
        width: 150px;
        height: 150px;
        for data in [
            { text: "Blue", color: #0000ff, bg: #eeeeee},
            { text: "Red", color: #ff0000, bg: #eeeeee},
            { text: "Green", color: #00ff00, bg: #eeeeee},
            { text: "Yellow", color: #ffff00, bg: #222222 },
            { text: "Black", color: #000000, bg: #eeeeee },
            { text: "White", color: #ffffff, bg: #222222 },
            { text: "Magenta", color: #ff00ff, bg: #eeeeee },
            { text: "Cyan", color: #00ffff, bg: #222222 },
        ] : Rectangle {
            height: 30px;
            background: data.bg;
            width: parent.width;
            Text {
                x: 0;
                text: data.text;
                color: data.color;
            }
        }
    }
}