How to add multiple textfield in kivymd

user_17646551 0
Viewed 176

i am making a form screen in which a user can input data and upload it to database. I want them to be able to add multiple textfields on a button press if they still want to add something. it should be scrollable since the amount of textfields is based on how many the user really wants. i have this code right here but it doesn't really do what i had in mind.

from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivy.uix.screenmanager import Screen
from kivy.uix.boxlayout import BoxLayout
from kivymd.uix.tab import MDTabsBase
from kivymd.uix.floatlayout import MDFloatLayout
from kivymd.uix.textfield import MDTextField

class TextField(MDTextField):
    pass

class Tab(MDFloatLayout, MDTabsBase):
    pass


class FormScreen(Screen):
    pass

class DemoApp(MDApp):
#function to add text field
def add_textfield(self):
    self.help.get_screen('form').ids.box.add_widget(
    TextField(hint_text= 'adsf',
    ))

def upload(self):
    
    name = self.help.get_screen('form').ids.input_1.text


def build(self):
    self.help = Builder.load_file('form.kv')
    # screen.add_widget(self.help)
    return self.help

Here is my kv file:

ScreenManager:
    FormScreen:

<FormScreen>
    name: 'form'
    MDBoxLayout:
        orientation: "vertical"
        MDToolbar:
            # md_bg_color:app.dark2
            title: "Upload Data"
            type_height: "small"
            left_action_items: [["arrow-left", lambda x : app.swtchScreen('collections')]]
            right_action_items: [["eraser", lambda x : root.eraser()],["plus", lambda x : app.add_textfield()]]
        MDTabs:
            id: tabs
            background_color: rgba(0,0,0,0)
            tab_hint_x: True
            Tab:
                title: "Passport Data"
                MDTextField:
                    id: input_1
                    hint_text: "Name"
                    pos_hint: {"center_x": 0.5, "center_y": 0.95}
                    size_hint: .75,0.09
                    color_mode: 'accent'
                    mode: "rectangle"

                #additional textfieldss
                MDTextField:
                    id: box

Thank you

kivymd kivy textfield python
1 Answers

You can modify the Tab to customize the layout you need to hold all necessary fields as follows,

        MDTabs:
            id: tabs
            background_color: rgba(0,0,0,0)
            tab_hint_x: True
            Tab:
                title: "Passport Data"
                MDBoxLayout: # Add main container.
                    orientation: "vertical"
                    padding: dp(10)
                    spacing: dp(5)
                    MDTextField:
                        id: input_1
                        hint_text: "Name"
#                        pos_hint: {"center_x": 0.5, "center_y": 0.95}
#                        size_hint: .75,0.09 # "size_hint_y" will be set automatically.
                        pos_hint: {"center_x": 0.5}
                        size_hint_x: .75
                        color_mode: 'accent'
                        mode: "rectangle"

                    #additional textfields
                    ScrollView:
                        MDBoxLayout: # Add all text fields in this container.
                            id: box
                            orientation: "vertical"
                            adaptive_height: True # Grow vertically.

Alternatively you could've inherited Tab from MDBoxLayout,

class Tab(MDBoxLayout, MDTabsBase):
    pass

Then the kvlang would be,

        MDTabs:
            id: tabs
            background_color: rgba(0,0,0,0)
            tab_hint_x: True
            Tab:
                title: "Passport Data"
                orientation: "vertical"
                padding: dp(10)
                spacing: dp(5)
                MDTextField:
                    id: input_1
                    hint_text: "Name"
#                    pos_hint: {"center_x": 0.5, "center_y": 0.95}
#                    size_hint: .75,0.09 # "y" will be set automatically.
                    pos_hint: {"center_x": 0.5}
                    size_hint_x: .75
                    color_mode: 'accent'
                    mode: "rectangle"

                #additional textfieldss
                ScrollView:
                    MDBoxLayout: # Add all text field here.
                        id: box
                        orientation: "vertical"
                        adaptive_height: True # Grow vertically.
user_173755730
Related