ListView
Table of contents
- Create from source
- Create from resource
- Interface description
- Properties
- "Order"
- "checkbox"
- "checkbox-horizontal-align"
- "checkbox-vertical-align"
- "checked"
- "current"
- "current-inactive-style"
- "current-style"
- "gap"
- "horizontal-align"
- "item-height"
- "item-horizontal-align"
- "item-vertical-align"
- "item-width"
- "items"
- "list-column-gap"
- "list-item-style"
- "list-row-gap"
- "list-wrap"
- "orientation"
- "vertical-align"
- Events
- Related global functions
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:
Related global functions
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