python - Kivy - 如何将 ImageButton 单击空间限制为仅在图像本身上？（而不是空白的“占用”空间）？

Question

我连续有四个 ImageButtons，全部由（似乎是）空格分隔。然而，这个空白也可以作为一个按钮（直到为图像分配的两个按钮的整个部分之间的中点）

'''

    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

'''

我如何使它只有图像本身充当按钮，而不是包括它周围的空间？

标签： pythonbuttonkivyimagebutton

Answer 1

通过使用 size_hint，我设法将“可点击”区域限制为图像本身（可点击区域现在是方形 - 图像是圆形的，角落仍然是可点击的）。

我首先减小了图像的水平尺寸，直到最右边的图像基本上接触到窗口的一侧。然后这个值（对我来说是 0.08）表示我的特定图像的水平宽度。然后我为剩余的图像填充了 0.08，并将它们与我的标签对齐。

然而，这并不排除我的圆形图像的角落，因为它们仍然是可点击的。但就我的目的而言，这个简单的解决方案就足够了。

更新代码：

'''

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

'''