43. ListView

ListView allows us, to view lists of data. As in most cases, here, the individual list items are selectable.

---

The root widget is based on BoxLayout. We use ListProperty, to hold the ListView data, to be displayed. Whenever, a particular list item is selected, its text will be placed in the StringProperty.

---

In the root, the list to be displayed by ListView, is in the variable, my_data. Initially, it is empty and thus the ListView, would be empty at startup. The StringProperty called selected_value, holds the individual list item button's text. The change() function will be called, from the kv file, whenever a particular list item is selected.

---

The app class has to return the root widget. It should be noted that, inside the kv file, root always refers to top of current tree, and not necessarily this class, unless rules are being defined, for the root widget.

# ex43.py

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ListProperty, StringProperty

class Ex43(BoxLayout):
    my_data = ListProperty([])
    selected_value = StringProperty('Select a button')
    def change(self,change):
        self.selected_value = 'Selected: {}'.format(change.text)

class Ex43App(App):
    def build(self):
        return Ex43()

if __name__ == '__main__':
    Ex43App().run()

---

In the kv file, we need two imports. The first is for the ListAdapter, which is needed to connect to the Python List. The second import is required since we want each of the list items to be selectable, and based on the Button. A rule is defined for ListItemButton to go to the change() function when a press is detected.

---

The root is based on BoxLayout. It will have a 'vertical' orientation. It will have three rows, the first is BoxLayout, and is shown here. The inner BoxLayout defines three items which will be arranged 'horizontally', the default orientation. The first item is a Label. Next, we have a TextInput with an id of add_box. The button is the last item and will add one string to the list, my_data.

---

ListView takes 80% of the height. We define the adapter as pointing to my_data. The canvas.before is used to make this item an orange color.

---

The bluish label indicates the selected value.

# ex43.kv

#: import ListAdapter kivy.adapters.listadapter.ListAdapter
#: import ListItemButton kivy.uix.listview.ListItemButton

<ListItemButton>:
    on_press: app.root.change(*args)
    
<Ex43>:
    orientation: 'vertical'
    BoxLayout:
        size_hint_y: .1
        Label:
            text: 'Enter String'
        TextInput:
            id: add_box
            multiline: False
            size_hint_x: 5
        Button:
            text: 'Add'
            on_press: root.my_data.append(add_box.text)
    ListView:
        size_hint_y: .8
        adapter:
            ListAdapter(data=root.my_data,
            selection_mode='single',
            allow_empty_selection=False,
            cls=ListItemButton)
        canvas.before:
            Color:
                rgb: 1,.5,0
            Rectangle:
                pos: self.pos
                size: self.size
    Label:
        size_hint_y: .1
        canvas.before:
            Color:
                rgb: 0,.5,1
            Rectangle:
                pos: self.pos
                size: self.size
        text: root.selected_value
        
            

---

In this result, we entered 7 lines. Then the last line was selected, and the label in the bottom shows the status. In this example, the items were added by typing. In a real application, they could be data, from a database, or a website.

---