Python/Kivy : How to put dynamic label widget and value

Question

I have two file test.py and test.kv .
i run test.py then shows show button.
When i click on show button then def abc call.Can someone tell me how to show array in dynamic label and value(Item1=5000.Item2=1000).
Item1 5000
Item2 1000

I am using array
arr = ({'Item1': 5000},{'Item2': 1000})

test.py

from kivy.uix.screenmanager import Screen
from kivy.app import App
from kivy.lang import Builder
from kivy.core.window import Window
from kivy.properties import BooleanProperty, ListProperty, StringProperty, ObjectProperty, NumericProperty

Window.clearcolor = (0.5, 0.5, 0.5, 1)
Window.size = (600, 600)

class Invoice(Screen):
    def __init__(self, **kwargs):
        super(Invoice, self).__init__(**kwargs)

    def abc(self):
        #fetching from database
        arr = ({'Item1': 5000},{'Item2': 1000})
        print(arr)

class Test(App):

    def build(self):
        self.root = Builder.load_file('test.kv')
        return self.root


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

test.kv

<Button@Button>:
    font_size: 15
    font_name: 'Verdana'
    size_hint_y:None
    height: 30

<Label@Label>:
    font_size: 15
    font_name: 'Verdana'
    size_hint_y:None
    height: 30

Invoice:
    BoxLayout:
        orientation: "vertical"
        padding : 15, 15

        BoxLayout:
            orientation: "vertical"
            padding : 5, 5
            size_hint: .6, None
            pos_hint: {'x': .18,}


            BoxLayout:
                orientation: "horizontal"
                padding : 5, 5
                spacing: 10, 10
                size: 800, 40
                size_hint: 1, None

                Button:
                    text: "Show"
                    size_hint_x: .05
                    spacing_x: 30
                    on_press:root.abc()

        BoxLayout:
            orientation: "horizontal"
            size_hint: 1, 1

            BoxLayout:
                orientation: "vertical"
                size_hint: .5, 1
                padding : 0, 15
                spacing: 10, 10
                size: 500, 30

                Button:
                    text: "Invoice"
                    text_size: self.size
                    halign: 'center'
                    valign: 'middle'

                GridLayout:
                    cols: 2
                    #orientation: "horizontal"
                    padding : 5, 0
                    spacing: 10, 0
                    #size: 500, 30
                    size_hint: 1, 1
                    pos: self.pos
                    size: self.size

                    Label:
                        size_hint_x: .35
                        text: "Item1"
                        text_size: self.size
                        halign: 'left'
                        valign: 'middle'
                        canvas.before:
                            Color:
                                rgb: .6, .6, .6
                            Rectangle:
                                pos: self.pos
                                size: self.size

                    Label:
                        size_hint_x: .15
                        text: "5000"
                        text_size: self.size
                        halign: 'right'
                        valign: 'middle'
                        canvas.before:
                            Color:
                                rgb: .6, .6, .6
                            Rectangle:
                                pos: self.pos
                                size: self.size

score 5 · Answer 1 · answered Mar 05 '18 at 16:24

In your abc() method you can create labels and add them to your layout. In order to do that, I made a few change to your code. I added an id to your GridLayout and changed your custom label class to MyLabel and added it to the py file, so that I could create them in Python. Here is the modified Python file:

from kivy.uix.label import Label
from kivy.uix.screenmanager import Screen
from kivy.app import App
from kivy.lang import Builder
from kivy.core.window import Window

Window.clearcolor = (0.5, 0.5, 0.5, 1)
Window.size = (600, 600)

class MyLabel(Label):
    pass

class Invoice(Screen):
    def __init__(self, **kwargs):
        super(Invoice, self).__init__(**kwargs)

    def abc(self):
        #fetching from database
        arr = ({'Item1': 5000},{'Item2': 1000})
        layout = self.ids['invoices']
        for invoice in arr:
            for key,val in invoice.items():
                lab1 = MyLabel(text=str(key),size_hint_x=.35, halign='left' )
                lab2 = MyLabel(text=str(val),size_hint_x=.15, halign='right' )
                layout.add_widget(lab1)
                layout.add_widget(lab2)

class Test(App):

    def build(self):
        self.root = Builder.load_file('test.kv')
        return self.root

And changes to the kv file included changing Label to MyLabel, moving as much as possible to the MyLabel class, and removing your example labels:

<Button@Button>:
    font_size: 15
    font_name: 'Verdana'
    size_hint_y:None
    height: 30

<MyLabel>:
    font_size: 15
    font_name: 'Verdana'
    size_hint_y:None
    height: 30
    text_size: self.size
    valign: 'middle'
    canvas.before:
        Color:
            rgb: .6, .6, .6
        Rectangle:
            pos: self.pos
            size: self.size

Invoice:
    BoxLayout:
        orientation: "vertical"
        padding : 15, 15

        BoxLayout:
            orientation: "vertical"
            padding : 5, 5
            size_hint: .6, None
            pos_hint: {'x': .18,}


            BoxLayout:
                orientation: "horizontal"
                padding : 5, 5
                spacing: 10, 10
                size: 800, 40
                size_hint: 1, None

                Button:
                    text: "Show"
                    size_hint_x: .05
                    spacing_x: 30
                    on_press:root.abc()

        BoxLayout:
            orientation: "horizontal"
            size_hint: 1, 1

            BoxLayout:
                orientation: "vertical"
                size_hint: .5, 1
                padding : 0, 15
                spacing: 10, 10
                size: 500, 30

                Button:
                    text: "Invoice"
                    text_size: self.size
                    halign: 'center'
                    valign: 'middle'

                GridLayout:
                    id: invoices
                    cols: 2
                    #orientation: "horizontal"
                    padding : 5, 0
                    spacing: 10, 0
                    #size: 500, 30
                    size_hint: 1, 1
                    pos: self.pos
                    size: self.size

score 4 · Accepted Answer · answered Mar 05 '18 at 17:46

Although the option to iterate over the data and generate the widget dynamically is an option, the truth is that it is unbeatable in the long term. If you have structured information it is appropriate to use a design pattern and kivy offers to use a RecycleView for these cases, this implements the MVC pattern, so we just need to pass the data and establish a view where an appropriate adapter can be provided.

In your case it is enough to design a widget that is what is shown in each row:

<Item@GridLayout>:
    cols: 2
    text: "" # new property
    value: 0 # new property
    padding : 5, 0
    spacing: 10, 0
    Label:
        size_hint_x: .35
        text: root.text
        halign: 'left'
        valign: 'middle'
        canvas.before:
            Color:
                rgb: .6, .6, .6
            Rectangle:
                pos: self.pos
                size: self.size

    Label:
        size_hint_x: .15
        text: str(root.value)
        halign: 'right'
        valign: 'middle'
        canvas.before:
            Color:
                rgb: .6, .6, .6
            Rectangle:
                pos: self.pos
                size: self.size

And then replace the GridLayout with the RecycleView:

RecycleView:
    id: rv
    viewclass: 'Item'
    RecycleBoxLayout:
        default_size: None, dp(30)
        default_size_hint: 1, None
        size_hint_y: None
        height: self.minimum_height
        orientation: 'vertical'

And in the event of the button assign the data, in this case you must convert your data to a list of dictionaries where the fields will be the text and value attribute of Item:

def convert_data(data):
    l = []
    for item in data:
        for key, value in item.items():
            l.append({'text': key, 'value': value})
    return l

class Invoice(Screen):
    def abc(self):
        #fetching from database
        arr = ({'Item1': 5000},{'Item2': 1000})

        # convert to [{'text': 'Item1', 'value': 5000}, {'text': 'Item2', 'value': 1000}]
        self.rv.data = convert_data(arr)

Complete Code:

main.py

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen

def convert_data(data):
    l = []
    for item in data:
        for key, value in item.items():
            l.append({'text': key, 'value': value})
    return l

class Invoice(Screen):
    def abc(self):
        #fetching from database
        arr = ({'Item1': 5000},{'Item2': 1000})

        # convert to [{'text': 'Item1', 'value': 5000}, {'text': 'Item2', 'value': 1000}]
        self.rv.data = convert_data(arr)

class MyApp(App):
    def build(self):
        return Builder.load_file('test.kv')

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

test.kv

<Button@Button>:
    font_size: 15
    size_hint_y:None
    height: 30

<Label@Label>:
    font_size: 15
    size_hint_y:None
    height: 30

<Item@GridLayout>:
    cols: 2
    text: ""
    value: 0
    padding : 5, 0
    spacing: 10, 0
    Label:
        size_hint_x: .35
        text: root.text
        halign: 'left'
        valign: 'middle'
        canvas.before:
            Color:
                rgb: .6, .6, .6
            Rectangle:
                pos: self.pos
                size: self.size

    Label:
        size_hint_x: .15
        text: str(root.value)
        halign: 'right'
        valign: 'middle'
        canvas.before:
            Color:
                rgb: .6, .6, .6
            Rectangle:
                pos: self.pos
                size: self.size

Invoice:
    rv: rv
    BoxLayout:
        orientation: "vertical"
        padding : 15, 15

        BoxLayout:
            orientation: "vertical"
            padding : 5, 5
            size_hint: .6, None
            pos_hint: {'x': .18,}


            BoxLayout:
                orientation: "horizontal"
                padding : 5, 5
                spacing: 10, 10
                size: 800, 40
                size_hint: 1, None

                Button:
                    text: "Show"
                    size_hint_x: .05
                    spacing_x: 30
                    on_press:root.abc()

        BoxLayout:
            orientation: "horizontal"
            size_hint: 1, 1

            BoxLayout:
                orientation: "vertical"
                size_hint: .5, 1
                padding : 0, 15
                spacing: 10, 10
                size: 500, 30

                Button:
                    text: "Invoice"
                    text_size: self.size
                    halign: 'center'
                    valign: 'middle'

                BoxLayout:
                    RecycleView:
                        id: rv
                        viewclass: 'Item'
                        RecycleBoxLayout:
                            default_size: None, dp(30)
                            default_size_hint: 1, None
                            size_hint_y: None
                            height: self.minimum_height
                            orientation: 'vertical'

Python/Kivy : How to put dynamic label widget and value

test.py

test.kv

2 Answers2