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.
JavaScript
x
35
35
1
from kivymd.app import MDApp
2
from kivy.lang.builder import Builder
3
from kivy.uix.screenmanager import Screen
4
from kivy.uix.boxlayout import BoxLayout
5
from kivymd.uix.tab import MDTabsBase
6
from kivymd.uix.floatlayout import MDFloatLayout
7
from kivymd.uix.textfield import MDTextField
8
9
class TextField(MDTextField):
10
pass
11
12
class Tab(MDFloatLayout, MDTabsBase):
13
pass
14
15
16
class FormScreen(Screen):
17
pass
18
19
class DemoApp(MDApp):
20
#function to add text field
21
def add_textfield(self):
22
self.help.get_screen('form').ids.box.add_widget(
23
TextField(hint_text= 'adsf',
24
))
25
26
def upload(self):
27
28
name = self.help.get_screen('form').ids.input_1.text
29
30
31
def build(self):
32
self.help = Builder.load_file('form.kv')
33
# screen.add_widget(self.help)
34
return self.help
35
Here is my kv file:
JavaScript
1
31
31
1
ScreenManager:
2
FormScreen:
3
4
<FormScreen>
5
name: 'form'
6
MDBoxLayout:
7
orientation: "vertical"
8
MDToolbar:
9
# md_bg_color:app.dark2
10
title: "Upload Data"
11
type_height: "small"
12
left_action_items: [["arrow-left", lambda x : app.swtchScreen('collections')]]
13
right_action_items: [["eraser", lambda x : root.eraser()],["plus", lambda x : app.add_textfield()]]
14
MDTabs:
15
id: tabs
16
background_color: rgba(0,0,0,0)
17
tab_hint_x: True
18
Tab:
19
title: "Passport Data"
20
MDTextField:
21
id: input_1
22
hint_text: "Name"
23
pos_hint: {"center_x": 0.5, "center_y": 0.95}
24
size_hint: .75,0.09
25
color_mode: 'accent'
26
mode: "rectangle"
27
28
#additional textfieldss
29
MDTextField:
30
id: box
31
Thank you
Advertisement
Answer
You can modify the Tab
to customize the layout you need to hold all necessary fields as follows,
JavaScript
1
27
27
1
MDTabs:
2
id: tabs
3
background_color: rgba(0,0,0,0)
4
tab_hint_x: True
5
Tab:
6
title: "Passport Data"
7
MDBoxLayout: # Add main container.
8
orientation: "vertical"
9
padding: dp(10)
10
spacing: dp(5)
11
MDTextField:
12
id: input_1
13
hint_text: "Name"
14
# pos_hint: {"center_x": 0.5, "center_y": 0.95}
15
# size_hint: .75,0.09 # "size_hint_y" will be set automatically.
16
pos_hint: {"center_x": 0.5}
17
size_hint_x: .75
18
color_mode: 'accent'
19
mode: "rectangle"
20
21
#additional textfields
22
ScrollView:
23
MDBoxLayout: # Add all text fields in this container.
24
id: box
25
orientation: "vertical"
26
adaptive_height: True # Grow vertically.
27
Alternatively you could’ve inherited Tab
from MDBoxLayout
,
JavaScript
1
3
1
class Tab(MDBoxLayout, MDTabsBase):
2
pass
3
Then the kvlang
would be,
JavaScript
1
26
26
1
MDTabs:
2
id: tabs
3
background_color: rgba(0,0,0,0)
4
tab_hint_x: True
5
Tab:
6
title: "Passport Data"
7
orientation: "vertical"
8
padding: dp(10)
9
spacing: dp(5)
10
MDTextField:
11
id: input_1
12
hint_text: "Name"
13
# pos_hint: {"center_x": 0.5, "center_y": 0.95}
14
# size_hint: .75,0.09 # "y" will be set automatically.
15
pos_hint: {"center_x": 0.5}
16
size_hint_x: .75
17
color_mode: 'accent'
18
mode: "rectangle"
19
20
#additional textfieldss
21
ScrollView:
22
MDBoxLayout: # Add all text field here.
23
id: box
24
orientation: "vertical"
25
adaptive_height: True # Grow vertically.
26