I'm trying to make a simple program that, right now, needs to have two functions.
The app has four images displayed at the top and for words in the middle. There are two switches in the bottom left corner, one to toggle text and the other to toggle images.
How would one use the switches to enable/disable the images and the text?
Here's a screenshot of the program. Below is the current code.
from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.core.window import Window
Window.size = (1280, 720)
class MyAppApp(MDApp):
height = '185dp'
width = '250dp'
text = 'airplane bicycle boat canoe'
x = 0
def build(self):
return Builder.load_string('''
FloatLayout:
MDLabel:
text: 'Images'
font_size: dp(18)
halign: 'center'
pos_hint: {'center_x': 0.1075, 'center_y': 0.135}
MDLabel:
text: 'Text'
halign: 'center'
pos_hint: {'center_x': 0.098, 'center_y': 0.075}
font_size: dp(18)
MDSwitch:
active: True
width: dp(40)
pos_hint: {'center_x': 0.05, 'center_y': 0.135}
MDSwitch:
active: True
width: dp(40)
pos_hint: {'center_x': 0.05, 'center_y': 0.075}
MDToolbar:
pos_hint: {'top': 1}
md_bg_color: [0, 106/255, 163/255, 1]
title: 'Images'
elevation: 20
FitImage:
size_hint_y: None
size_hint_x: None
height: app.height
width: app.width
radius: 36, 36, 36, 36
elevation: 20
source: 'images/transportation/Airplane.jpg'
pos_hint: {'center_x': 0.2, 'center_y': 0.7}
FitImage:
size_hint_y: None
size_hint_x: None
height: app.height
width: app.width
radius: 36, 36, 36, 36
elevation: 20
source: 'images/transportation/Bicycle.jpg'
pos_hint: {'center_x': 0.4, 'center_y': 0.7}
FitImage:
size_hint_y: None
size_hint_x: None
height: app.height
width: app.width
radius: 36, 36, 36, 36
elevation: 20
source: 'images/transportation/Boat.jpg'
pos_hint: {'center_x': 0.6, 'center_y': 0.7}
FitImage:
size_hint_y: None
size_hint_x: None
height: app.height
width: app.width
radius: 36, 36, 36, 36
elevation: 20
source: 'images/transportation/Canoe.jpg'
pos_hint: {'center_x': 0.8, 'center_y': 0.7}
MDLabel:
text: app.text
halign: 'center'
pos_hint: {'center_y': 0.375}
font_size: dp(56)
'''
)
MyAppApp().run()
Any help would be greatly appreciated. Thanks!
CodePudding user response:
To turn on/off the text, you can define a method in your App
class that adjusts the opacity
of the MDLabel
, like this:
def switch_text(self, switch_instance):
text_widget = self.root.ids.text
if switch_instance.active:
text_widget.opacity = 1
else:
text_widget.opacity = 0
This requires adding an id
to your kv
:
MDLabel:
id: text # added id
text: app.text
halign: 'center'
pos_hint: {'center_y': 0.375}
font_size: dp(56)
And an on_active:
entry for the MDSwitch
:
MDSwitch:
active: True
width: dp(40)
pos_hint: {'center_x': 0.05, 'center_y': 0.075}
on_active: app.switch_text(self) # triggers method call when active changes
You can do the same type of thing for the Images
, but you may need to add an id
for each Image
and change the opacity
for each.
Using opacity
just makes the widget invisible, but it still hold its position in the GUI. You could change the size
of those widgets (to (0,0)) instead, if you want to open up the space that they occupy in the GUI.