Kivy技术问询：BoxLayout内保持按钮比例及图片按钮点击触发函数

Great question! Let's break this down into two key parts: keeping your image buttons square as the BoxLayout adjusts, and making those images trigger functions when clicked. Here's how to solve both issues cleanly with Kivy's built-in components:

1. Keep Buttons Square in a Horizontal BoxLayout #

The core idea is to lock the button's aspect ratio so its width always matches its height. For a horizontal BoxLayout:

• Set size_hint_y: 1 to make the button take the full height of the parent layout.
• Disable automatic width stretching with size_hint_x: None.
• Force the width to equal the button's height using width: self.height—this ensures it stays square even as the BoxLayout resizes or you add/remove buttons.

2. Add Click Functionality to Image Buttons #

Instead of using a raw Image widget (which lacks built-in click handling), use a Button component and set its background to your image. This gives you all standard button interactivity (like on_press/on_release events) while displaying your image seamlessly.

Full Working Example (KV Language + Python) #

KV files are ideal for Kivy layout design—here's a complete, runnable example:

<MyBoxLayout>:
    orientation: 'horizontal'
    padding: 10
    spacing: 10

    Button:
        # Set your image as the button's default background
        background_normal: 'your_image.png'
        # Optional: Remove the default button border
        border: 0,0,0,0
        # Lock square aspect ratio
        size_hint_y: 1
        size_hint_x: None
        width: self.height
        # Bind your custom function to the click event
        on_press: self.parent.handle_first_button_click()

    Button:
        background_normal: 'another_image.png'
        border: 0,0,0,0
        size_hint_y: 1
        size_hint_x: None
        width: self.height
        on_press: self.parent.handle_second_button_click()

Corresponding Python code:

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class MyBoxLayout(BoxLayout):
    def handle_first_button_click(self):
        print("First image button clicked!")
        # Add your custom logic here (e.g., open a screen, update data)

    def handle_second_button_click(self):
        print("Second image button clicked!")
        # Add your custom logic here

class SquareImageButtonsApp(App):
    def build(self):
        return MyBoxLayout()

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

Bonus: Handle Non-Square Images #

If your image isn't square but you want the button to stay square, nest an Image inside the transparent button. This keeps the button square while letting the image scale proportionally:

Button:
    size_hint_y: 1
    size_hint_x: None
    width: self.height
    background_color: 0,0,0,0  # Make button background transparent
    on_press: self.parent.handle_button_click()

    Image:
        source: 'non_square_image.png'
        size_hint: 1,1
        allow_stretch: True
        keep_ratio: True

内容的提问来源于stack exchange，提问作者Massimiliano Ferrari