点击按钮切换布局显隐：Kivy左侧垂直菜单切换功能实现需求

Got it, let's build this toggleable sidebar menu with Kivy. Here's a complete, clean implementation that uses a green button to show/hide the left vertical menu, with separate .py and .kv files:

Python File (main.py) #

This handles the core logic for toggling the menu with smooth animations:

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.animation import Animation
from kivy.properties import ObjectProperty

class MainLayout(BoxLayout):
    menu_box = ObjectProperty(None)
    
    def toggle_menu(self):
        # Check if the menu is currently visible
        if self.menu_box.opacity == 1:
            # Animate menu to hide smoothly
            hide_anim = Animation(opacity=0, width=0, duration=0.3)
            hide_anim.start(self.menu_box)
        else:
            # Animate menu back to visible
            target_width = self.width * 0.2  # 20% of screen width
            show_anim = Animation(opacity=1, width=target_width, duration=0.3)
            show_anim.start(self.menu_box)

class MenuApp(App):
    def build(self):
        return MainLayout()

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

KV File (main.kv) #

This defines the UI structure, styling, and widget relationships:

<MainLayout>:
    menu_box: menu_box
    orientation: 'horizontal'
    
    # Green toggle button (always visible)
    Button:
        text: '☰'
        background_color: (0, 1, 0, 1)  # RGB + alpha: pure green
        size_hint_x: None
        width: 50
        on_press: root.toggle_menu()
    
    # Vertical menu container
    BoxLayout:
        id: menu_box
        orientation: 'vertical'
        size_hint_x: 0.2
        width: self.size_hint_x * root.width
        opacity: 1
        
        # Add your custom menu items here
        Button:
            text: 'Dashboard'
        Button:
            text: 'Settings'
        Button:
            text: 'Help'
    
    # Free content area (customize this as needed)
    BoxLayout:
        size_hint_x: 0.8
        padding: 20
        Label:
            text: 'Your Content Goes Here'
            font_size: 28
            bold: True

Key Details to Note: #

• The green toggle button stays visible at all times, so users can always access the menu control.
• We use Kivy's Animation class to create smooth fade/slide transitions instead of abrupt visibility changes—this feels more polished.
• The menu takes up 20% of the screen width when visible; you can adjust the size_hint_x value to make it wider/narrower.
• The content area is a blank slate—replace the sample Label with any widgets you need (forms, lists, media, etc.).

内容的提问来源于stack exchange，提问作者Mike Delta