Kivy recycleview buttons switch attributes on window resize

Question

I have taken code from this post to display data from a database using RecycleView. I have altered the code to change the color of a button after it is pressed. This works.

Before resize

The issue is when the window is resized, the colored button (Nth in the table) loses this attribute, and the <end> - N button gains the attribute!

After resize

When def refresh_view_attrs(self, rv, index, data): runs, I see that index increases from zero and data has the correct button label for the index. However, self.Text labels are in reverse order. I believe this is where things are going wrong but I can't fix.

Any help would be apprecited!

main.py

import sqlite3

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.recycleview.views import RecycleDataViewBehavior
from kivy.uix.button import Button
from kivy.properties import BooleanProperty, ListProperty, StringProperty, ObjectProperty
from kivy.uix.recyclegridlayout import RecycleGridLayout
from kivy.uix.behaviors import FocusBehavior
from kivy.uix.recycleview.layout import LayoutSelectionBehavior
from kivy.uix.popup import Popup

connection = sqlite3.connect("demo2.db", isolation_level=None)
cursor = connection.cursor()

class TextInputPopup(Popup):
    obj = ObjectProperty(None)
    obj_text = StringProperty("")

    def __init__(self, obj, **kwargs):
        super(TextInputPopup, self).__init__(**kwargs)
        self.obj = obj
        self.obj_text = obj.text


class SelectableRecycleGridLayout(FocusBehavior, LayoutSelectionBehavior,
                                  RecycleGridLayout):
    ''' Adds selection and focus behaviour to the view. '''


class SelectableButton(RecycleDataViewBehavior, Button):
    ''' Add selection support to the Button '''
    index = None
    selected = BooleanProperty(False)
    selectable = BooleanProperty(True)

    def refresh_view_attrs(self, rv, index, data):
        ''' Catch and handle the view changes '''
        self.index = index
        return super(SelectableButton, self).refresh_view_attrs(rv, index, data)

    def on_touch_down(self, touch):
        ''' Add selection on touch down '''
        if super(SelectableButton, self).on_touch_down(touch):
            return True
        if self.collide_point(*touch.pos) and self.selectable:
            return self.parent.select_with_touch(self.index, touch)

    def apply_selection(self, rv, index, is_selected):
        ''' Respond to the selection of items in the view. '''
        self.selected = is_selected

    def on_press(self):
        popup = TextInputPopup(self)
        popup.open()

    def update_changes(self, txt):
        self.text = txt
        self.background_color = [1, 0, 1, 1]


class RV(BoxLayout):
    data_items = ListProperty([])

    def __init__(self, **kwargs):
        super(RV, self).__init__(**kwargs)
        self.get_users()

    def get_users(self):

        cursor.execute("CREATE TABLE IF NOT EXISTS Callbacks(cName TEXT, cID INT, cbTime INT, cbRems TEXT)")
        cursor.execute("INSERT INTO Callbacks VALUES ('Client1','1','1500','Test1')")
        cursor.execute("INSERT INTO Callbacks VALUES ('Client2','2','1600','Test2')")
        cursor.execute("INSERT INTO Callbacks VALUES ('Client3','3','1700','Test3')")
        connection.commit()
        cursor.execute("SELECT * FROM Callbacks ORDER BY ROWID DESC")

        rows = cursor.fetchall()

        # create data_items
        for row in rows:
            for col in row:
                self.data_items.append(col)

        for row in rows:
            print(self.data_items)



class Test2App(App):
    title = "Kivy RecycleView & SQLite3 Demo"

    def build(self):
        return RV()


if __name__ == "__main__":
    Test2App().run()

test2.kv

#:kivy 1.10.0

<TextInputPopup>:
    title: "Popup"
    size_hint: None, None
    size: 400, 400
    auto_dismiss: False

    BoxLayout:
        orientation: "vertical"
        TextInput:
            id: txtinput
            text: root.obj_text
        Button:
            size_hint: 1, 0.2
            text: "Save Changes"
            on_release:
                root.obj.update_changes(txtinput.text)
                root.dismiss()
        Button:
            size_hint: 1, 0.2
            text: "Cancel Changes"
            on_release: root.dismiss()


<SelectableButton>:
    # Draw a background to indicate selection
    canvas.before:
        Color:
            rgba: (.0, 0.9, .1, .3) if self.selected else (0, 0, 0, 1)
        Rectangle:
            pos: self.pos
            size: self.size

<RV>:
    BoxLayout:
        orientation: "vertical"

        GridLayout:
            size_hint: 1, None
            size_hint_y: None
            height: 25
            cols: 4

            Label:
                text: "Name"
            Label:
                text: "ID"
            Label:
                text: "CB Time"
            Label:
                text: "Remarks"

        BoxLayout:
            RecycleView:
                viewclass: 'SelectableButton'
                data: [{'text': str(x)} for x in root.data_items]
                SelectableRecycleGridLayout:
                    cols: 4
                    default_size: None, dp(26)
                    default_size_hint: 1, None
                    size_hint_y: None
                    height: self.minimum_height
                    #orientation: 'vertical'
                    multiselect: True
                    touch_multiselect: True

score 0 · Answer 1 · answered Feb 06 '21 at 14:28

A RecycleView recycles the viewclass instances (SelectableButton), so any attributes that you set on one of the SelectableButtons will follow that SelectableButton, not the data. Any attributes that you want to stay with a particular data item must be set in the data of the RecycleView. So, in order to get background_color to follow a particular data item, it must be specified in the data. One way to do that is to make the data_items into the format needed for the RV,data:

    # create data_items
    for row in rows:
        for col in row:
            # self.data_items.append(col)
            self.data_items.append({'text':str(col), 'background_color':[1,1,1,1]})

Then reference the data_items directly from the kv:

        RecycleView:
            viewclass: 'SelectableButton'
            # data: [{'text': str(x)} for x in root.data_items]
            data: root.data_items
            SelectableRecycleGridLayout:

Now, when a data item gets changed, push that change into the data:

def update_changes(self, txt):
    self.text = txt
    self.background_color = [1, 0, 1, 1]
    data = App.get_running_app().root.data_items[self.index]
    data['background_color'] = self.background_color
    data['text'] = txt

Thank you for the clear explanation! I have an understanding as to what is happening now. I will implement your approach. A big thanks to you :) — AGoodView, Feb 06 '21 at 20:36

Kivy recycleview buttons switch attributes on window resize

1 Answers1