ListView

Vertical orientation

Horizontal orientation

An element which extends functionality of ListLayout, providing a list-like structure for displaying items. It allows to select specific item/items and has other additional properties

Create from source

func NewListView(session Session, params Params) ListView

Creates the new list view and return its interface

Create from resource

ListView {
    id = listView,
    width = 100%,
    height = 100%,
}

Interface description

Inherit methods, properties and events from ParentView, View

ReloadListViewData()

Forces ListView to fetch its content and redraw

Properties

"Order"

Used in child views to specify visual order of the view inside the ListLayout. Items in a container are sorted by ascending order value and then by their addition to the container order

Constant: Order

Types: int, string

Values

int string Description
< 0 < "0" Views with lower value will be at the beginning
>= 0 >= "0" Views with higher value will be at the end

"checkbox"

Style of checkbox used to mark items in a list. Default value is "none"

Constant: ItemCheckbox

Types: int, string

Values

int string Description
0(NoneCheckbox) "none" There is no checkbox
1(SingleCheckbox) "single" A checkbox that allows you to mark only one item, example: ◉
2(MultipleCheckbox) "multiple" A checkbox that allows you to mark several items, example: ☑

"checkbox-horizontal-align"

Checkbox horizontal alignment(if enabled by "checkbox" property)

Constant: CheckboxHorizontalAlign

Types: int, string

Values

int string Description
0(LeftAlign) "left" Checkbox on the left edge, content on the right
1(RightAlign) "right" Checkbox on the right edge, content on the left
2(CenterAlign) "center" Center horizontally. Content below or above

"checkbox-vertical-align"

Checkbox vertical alignment(if enabled by "checkbox" property)

Constant: CheckboxVerticalAlign

Types: int, string

Values

int string Description
0(TopAlign) "top" Top alignment
1(BottomAlign) "bottom" Bottom alignment
2(CenterAlign) "center" Center alignment

"checked"

Set or get the list of checked items. Stores array of indices of checked items

Constant: Checked

Types: []int, int, string

Internal type is []int, other types converted to it during assignment

Conversion rules

[]int - contains indices of selected list items. Stored as is

int - contains index of one selected list item, converted to []int

string - contains one or several indices of selected list items separated by comma(,)

Examples

ListView {
    orientation = up-down,
    checkbox = multiple,
    items = [
        "Item 1",
        "Item 2",
        "Item 3",
    ],
    checked = "0,2",
}
list := rui.NewListView(session, rui.Params{
    rui.Orientation:  rui.TopDownOrientation,
    rui.ItemCheckbox: rui.MultipleCheckbox,
    rui.Items: []string{
        "Item 1",
        "Item 2",
        "Item 3",
    },
    rui.Checked: []int{
        0,
        2,
    },
})

"current"

Set or get index of selected item

Constant: Current

Types: int, string

Values

int string Description
-1 "-1" No item has been selected
>= 0 >= "0" Index of selected item

"current-inactive-style"

Defines the style of the selected item when the ListView is unfocused

Constant: CurrentInactiveStyle

Types: string

Examples

Description of theme with style listed

theme {
    colors = _{
        ruiSelectedColor = #FFE0E0E0,
        ruiSelectedTextColor = #FF000000,
    },
    colors:dark = _{
        ruiSelectedColor = #FFE0E0E0,
        ruiSelectedTextColor = #FF000000,
    },
    styles [
        ruiListItemSelected {
            background-color = @ruiSelectedColor,
            text-color = @ruiSelectedTextColor,
        },
    ]
}
ListView {
    current-inactive-style = ruiListItemSelected
    items = [
        "Item 1",
        "Item 2",
        "Item 3",
    ],
}
list := rui.NewListView(session, rui.Params{
    rui.CurrentInactiveStyle: "ruiListItemSelected",
    rui.Items: []string{
        "Item 1",
        "Item 2",
        "Item 3",
    },
})

"current-style"

Defines the style of the selected item when the ListView is focused

Constant: CurrentStyle

Types: string

Examples

Description of theme with style listed

theme {
    colors = _{
        ruiHighlightColor = #FF1A74E8,
        ruiHighlightTextColor = #FFFFFFFF,
    },
    colors:dark = _{
        ruiHighlightColor = #FF1A74E8,
        ruiHighlightTextColor = #FFFFFFFF,
    },
    styles [
        ruiListItemFocused {
            background-color=@ruiHighlightColor,
            text-color=@ruiHighlightTextColor,
        },
    ]
}
ListView {
    current-style = ruiListItemFocused
    items = [
        "Item 1",
        "Item 2",
        "Item 3",
    ],
}
list := rui.NewListView(session, rui.Params{
    rui.CurrentStyle: "ruiListItemFocused",
    rui.Items: []string{
        "Item 1",
        "Item 2",
        "Item 3",
    },
})

"gap"

Specify both "list-column-gap" and "list-row-gap"

Constant: Gap

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListView {
    gap = 1em,
    items = [
        "Item 1",
        "Item 2",
        "Item 3",
    ],
}
list := rui.NewListView(session, rui.Params{
    rui.Gap: rui.Em(1),
    rui.Items: []string{
        "Item 1",
        "Item 2",
        "Item 3",
    },
})

"horizontal-align"

Sets the horizontal alignment of the content inside a block element

Constant: HorizontalAlign

Types: int, string

Values

int string Description
0(LeftAlign) "left" Left alignment
1(RightAlign) "right" Right alignment
2(CenterAlign) "center" Center alignment
3(StretchAlign) "stretch" Width alignment

"item-height"

Fixed height of list elements

Constant: ItemHeight

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListView {
    item-height = 2em,
    items = [
        "Item 1",
        "Item 2",
        "Item 3",
    ],
}
list := rui.NewListView(session, rui.Params{
    rui.ItemHeight: rui.Em(2),
    rui.Items: []string{
        "Item 1",
        "Item 2",
        "Item 3",
    },
})

"item-horizontal-align"

Sets the horizontal alignment of the contents of the list items

Constant: ItemHorizontalAlign

Types: int, string

Values

int string Description
0(LeftAlign) "left" Left alignment
1(RightAlign) "right" Right alignment
2(CenterAlign) "center" Center alignment
3(StretchAlign) "stretch" Height alignment

"item-vertical-align"

Sets the vertical alignment of the contents of the list items

Constant: ItemVerticalAlign

Types: int, string

Values

int string Description
0(TopAlign) "top" Top alignment
1(BottomAlign) "bottom" Bottom alignment
2(CenterAlign) "center" Center alignment
3(StretchAlign) "stretch" Height alignment

"item-width"

Fixed width of list elements

Constant: ItemWidth

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListView {
    width = 20em,
    item-width = 10em,
    background-color = gray,
    items = [
        TextView {
            background-color = skyblue,
            text = "Item 1",
        },
        TextView {
            background-color = blue,
            text = "Item 2",
        },
        TextView {
            background-color = darkblue,
            text = "Item 3",
        },
    ],
}
list := rui.NewListView(session, rui.Params{
    rui.Width:           rui.Em(20),
    rui.ItemWidth:       rui.Em(10),
    rui.BackgroundColor: rui.Gray,
    rui.Items: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.BackgroundColor: rui.SkyBlue,
            rui.Text:            "Item 1",
        }),
        rui.NewTextView(session, rui.Params{
            rui.BackgroundColor: rui.Blue,
            rui.Text:            "Item 2",
        }),
        rui.NewTextView(session, rui.Params{
            rui.BackgroundColor: rui.DarkBlue,
            rui.Text:            "Item 3",
        }),
    },
})

"items"

List content. Main value is an implementation of ListAdapter interface

Constant: Items

Types: ListAdapter, []View, []string, []any containing elements of View, string, fmt.Stringer, float and int

Internal type is either []View or ListAdapter, other types converted to it during assignment

Conversion rules

ListAdapter - interface which provides an access to list items and other information, stored as is

[]View - an array of list items, each in a form of some view-based element. Stored as is

[]string - an array of text. Converted into an internal implementation of ListAdapter, each list item will be an instance of TextView

[]any - an array of items of arbitrary type, where types like string, fmt.Stringer, float and int will be converted to TextView. View type will remain unchanged. All values after conversion will be wrapped by internal implementation of ListAdapter

Examples

ListView {
    items = [
        "1",
        TextView {
            text = "2",
        },
        2.5,
        3,
    ],
}
list := rui.NewListView(session, rui.Params{
    rui.Items: []any{
        "1",
        rui.NewTextView(session, rui.Params{
            rui.Text: "2",
        }),
        2.5,
        3,
    },
})

"list-column-gap"

Set the distance between the columns of the ListLayout. Default value 0px

Constant: ListColumnGap

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    list-column-gap = 1em,
    orientation = start-to-end,
    content = [
        "Item 1",
        "Item 2",
        "Item 3",
    ],
}
list := rui.NewListLayout(session, rui.Params{
    rui.ListColumnGap: rui.Em(1),
    rui.Orientation: rui.StartToEndOrientation,
    rui.Content: []string{
        "Item 1",
        "Item 2",
        "Item 3",
    },
})

"list-item-style"

Defines the style of an unselected item

Constant: ListItemStyle

Types: string

Examples

Description of theme with style listed

theme {
    constants = _{
        ruiListItemHorizontalPadding = 12px,
        ruiListItemVerticalPadding = 4px,
    },
    styles [
        ruiListItem {
            radius = 4px,
            padding = "@ruiListItemVerticalPadding, @ruiListItemHorizontalPadding, @ruiListItemVerticalPadding, @ruiListItemHorizontalPadding",
        },
    ]
}
ListView {
    list-item-style = ruiListItem
    items = [
        "Item 1",
        "Item 2",
        "Item 3",
    ],
}
list := rui.NewListView(session, rui.Params{
    rui.ListItemStyle: "ruiListItem",
    rui.Items: []string{
        "Item 1",
        "Item 2",
        "Item 3",
    },
})

"list-row-gap"

Set the distance between the rows of the ListLayout. Default value 0px

Constant: ListRowGap

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    list-row-gap = 1em,
    content = [
        "Item 1",
        "Item 2",
        "Item 3",
    ],
}
list := rui.NewListLayout(session, rui.Params{
    rui.ListRowGap: rui.Em(1),
    rui.Content: []string{
        "Item 1",
        "Item 2",
        "Item 3",
    },
})

"list-wrap"

Defines the position of elements in case of reaching the border of the container

Constant: ListWrap

Types: int, string

Values

int string Description
0(ListWrapOff) "off" The column or row of elements continues and goes beyond the bounds of the visible area
1(ListWrapOn) "on" Starts a new column or row of elements as necessary. The new column is positioned towards the end
2(ListWrapReverse) "reverse" Starts a new column or row of elements as necessary. The new column is positioned towards the beginning

"orientation"

Specifies how the children will be positioned relative to each other

Constant: Orientation

Types: int, string

Values

int string Description
0(TopDownOrientation) "up-down" Child elements are arranged in a column from top to bottom
1(StartToEndOrientation) "start-to-end" Child elements are laid out in a row from beginning to end
2(BottomUpOrientation) "bottom-up" Child elements are arranged in a column from bottom to top
3(EndToStartOrientation) "end-to-start" Child elements are laid out in a line from end to beginning

"vertical-align"

Sets the vertical alignment of the content inside a block element

Constant: VerticalAlign

Types: int, string

Values

int string Description
0(TopAlign) "top" Top alignment
1(BottomAlign) "bottom" Bottom alignment
2(CenterAlign) "center" Center alignment
3(StretchAlign) "stretch" Height alignment

Events

"list-item-checked"

Occur when a list item checkbox becomes checked or unchecked

Constant: ListItemCheckedEvent

General listener format:

func(list rui.ListView, checkedItems []int)

where: * list - Interface of a list which generated this event * checkedItems - Array of indices of marked elements

Allowed listener formats:

func(checkedItems []int)

func(list rui.ListView)

func()

"list-item-clicked"

Occur when the user clicks on an item in the list

Constant: ListItemClickedEvent

General listener format:

func(list rui.ListView, item int)

where: * list - Interface of a list which generated this event * item - An index of an item clicked

Allowed listener formats:

func(item int)

func(list rui.ListView)

func()

"list-item-selected"

Occur when a list item becomes selected

Constant: ListItemSelectedEvent

General listener format:

func(list rui.ListView, item int)

where: * list - Interface of a list which generated this event * item - An index of an item selected

Allowed listener formats:

func NewTextListAdapter(items []string, params Params) ListAdapter

Create the new ListAdapter for a string list displaying. The second argument is parameters of a TextView item

func NewViewListAdapter(items []View) ListAdapter

Create the new ListAdapter for a view list displaying

func GetHorizontalAlign(view View, subviewID ...string) int

Return the vertical align of a ListView or Checkbox: LeftAlign (0), RightAlign (1), CenterAlign (2), StretchAlign (3). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListItemCheckedListeners(view View, subviewID ...string) []func(ListView, []int)

Returns a ListItemCheckedListener of the ListView. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListItemClickedListeners(view View, subviewID ...string) []func(ListView, int)

Returns a ListItemClickedListener of the ListView. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListItemFrame(view View, subviewID string, index int) Frame

Returns the location and size of the ListView item in pixels. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListItemHeight(view View, subviewID ...string) SizeUnit

Returns the height of a ListView item. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListItemHorizontalAlign(view View, subviewID ...string) int

Returns the horizontal align of the ListView item content: LeftAlign (0), RightAlign (1), CenterAlign (2), StretchAlign (3). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListItemSelectedListeners(view View, subviewID ...string) []func(ListView, int)

Returns a ListItemSelectedListener of the ListView. If there are no listeners then the empty list is returned If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListItemVerticalAlign(view View, subviewID ...string) int

Returns the vertical align of the ListView item content: TopAlign (0), BottomAlign (1), CenterAlign (2). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListItemWidth(view View, subviewID ...string) SizeUnit

Returns the width of a ListView item. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListViewAdapter(view View, subviewID ...string) ListAdapter

Returns the ListView adapter. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListViewCheckbox(view View, subviewID ...string) int

Returns the ListView checkbox type: NoneCheckbox (0), SingleCheckbox (1) and MultipleCheckbox (2). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListViewCheckboxHorizontalAlign(view View, subviewID ...string) int

Returns the horizontal align of the ListView checkbox: LeftAlign (0), RightAlign (1), CenterAlign (2). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListViewCheckboxVerticalAlign(view View, subviewID ...string) int

Returns the vertical align of the ListView checkbox: TopAlign (0), BottomAlign (1), CenterAlign (2). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetListViewCheckedItems(view View, subviewID ...string) []int

Returns the array of ListView checked items. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetVerticalAlign(view View, subviewID ...string) int

Return the vertical align of a list: TopAlign (0), BottomAlign (1), CenterAlign (2), StretchAlign (3). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func IsListViewCheckedItem(view View, subviewID string, index int) bool

Returns true if the ListView item with index is checked, false otherwise. If the second argument (subviewID) is "" then a value from the first argument (view) is returned

func ListViewByID(rootView View, id string) ListView

Return a ListView with id equal to the argument of the function or nil if there is no such View or View is not ListView

func ReloadListViewData(view View, subviewID ...string)

Updates ListView content. If the second argument (subviewID) is not specified or is an empty string then content the first argument (view) is updated