Kivy - How do I restrict the ImageButton click space to only on the image itself? (and not the blank “occupied” space)?

问题

I have four ImageButtons in a row, all separated by (what seems to be) blank space. This blank space also however acts as a button (up to the halfway point between the two Buttons' entire section allocated for the Image)

'''

    FloatLayout:

        canvas:
            Color:
                rgb: utils.get_color_from_hex("#0a5a97")
            Rectangle:
                size: self.size
                pos: self.pos
        pos_hint: {"top":0.125,"right":1}
        size_hint: 1,.125

        ImageButton:
            source: "Icons5/040-user.png"
            pos_hint: {"top":0.95,"right":1}
            size_hint: .3,.7
            on_release:
                print("Account")

        ImageButton:
            source: "Icons5/002-settings.png"
            pos_hint: {"top":0.95,"right":.75}
            size_hint: .3,.7
            on_release:
                print("Settings")
                app.change_screen("settings_screen", direction='right', mode='push')

        ImageButton:
            source: "Icons5/015-idea.png"
            pos_hint: {"top":0.95,"right":.5}
            size_hint: .3,.7
            on_release:
                print("Info")
                app.change_screen("settings_screen", direction='right', mode='push')

        ImageButton:
            source: "Icons5/003-home.png"
            pos_hint: {"top":0.95,"right":.25}
            size_hint: .3,.7
            on_release:
                print("Home")
                app.change_screen("home_screen", direction='right', mode='push')


        Label:

            pos_hint: {"top":0.2,"right":1}
            size_hint: .3, .15
            font_color:
                utils.get_color_from_hex("#425FFF")
            font_size: 16
            text: "Account"
            markup: True


        Label:
            pos_hint: {"top":0.2,"right":.75}
            size_hint: .3, .15
            font_color:
                utils.get_color_from_hex("#425FFF")
            font_size: 16
            text: "Settings"
            markup: True

        Label:
            pos_hint: {"top":0.2,"right":.5}
            size_hint: .3, .15
            font_color:
                utils.get_color_from_hex("#425FFF")
            font_size: 16
            text: "Info"
            markup: True

        Label:
            pos_hint: {"top":0.2,"right":.25}
            size_hint: .3, .15
            font_color:
                utils.get_color_from_hex("#425FFF")
            font_size: 16
            text: "Home"
            markup: True

'''

How do I make it so only the Image itself acts as the button, rather than including the space which surrounds it?

回答1:

I managed to restrict the "Clickable" area to the image itself (Clickable area is now Square - Image is circular, corners are still clickable), by playing around with the size_hint.

I first decreased the horizontal size of the image until the most-right image was basically touching the side of the window. then this value (.08 for me) indicated the horizontal width of my specific image. then I populated .08 for the remaining Images, and lined them up with my labels.

This however, does not exclude the corners of my round images as they are still clickable. But for my purposes this simple solution will suffice.

updated code:

'''

FloatLayout:

    canvas:
        Color:
            rgb: utils.get_color_from_hex("#0a5a97")
        Rectangle:
            size: self.size
            pos: self.pos
    pos_hint: {"top":0.125,"right":1}
    size_hint: 1,.125


    ImageButton:
        source: "Icons5/040-user.png"
        pos_hint: {"top":0.95,"right":.80}
        size_hint: .07,.7
        on_press:
            print("Account")

    ImageButton:
        source: "Icons5/002-settings.png"
        pos_hint: {"top":0.95,"right":.60}
        size_hint: .07,.7
        on_press:
            print("Settings")

    ImageButton:
        source: "Icons5/015-idea.png"
        pos_hint: {"top":0.95,"right":.40}
        size_hint: .07,.7
        on_press:
            print("Info")


    ImageButton:
        source: "Icons5/003-home.png"
        pos_hint: {"top":0.95,"right":.20}
        size_hint: .07,.7
        on_press:
            print("Home")
            app.change_screen("home_screen", direction='right', mode='push')


    Label:

        pos_hint: {"top":0.2,"right":.8}
        size_hint: .07,.15
        font_color:
            utils.get_color_from_hex("#425FFF")
        font_size: 16
        text: "Account"
        markup: True


    Label:
        pos_hint: {"top":0.2,"right":.6}
        size_hint: .07,.15
        font_color:
            utils.get_color_from_hex("#425FFF")
        font_size: 16
        text: "Settings"
        markup: True

    Label:
        pos_hint: {"top":0.2,"right":.4}
        size_hint: .07,.15
        font_color:
            utils.get_color_from_hex("#425FFF")
        font_size: 16
        text: "Info"
        markup: True

    Label:
        pos_hint: {"top":0.2,"right":.20}
        size_hint: .07,.15
        font_color:
            utils.get_color_from_hex("#425FFF")
        font_size: 16
        text: "Home"
        markup: True

'''

来源：https://stackoverflow.com/questions/63024668/kivy-how-do-i-restrict-the-imagebutton-click-space-to-only-on-the-image-itself