如何在 Kivy 中将鼠标悬停在按钮上时显示边框

Question

我最近开始学习 Kivy，我不敢相信像创建按钮并向其添加基本行为（如将鼠标悬停在按钮上）等简单的事情是如此困难且不直观。

我的问题是当我用鼠标悬停在按钮上时如何使边框出现在按钮周围？

我有这个简单的“主菜单”设计，我想让按钮改变其外观，如下图所示：

我唯一不明白的是如何让鼠标悬停在按钮上时出现边框（尽管找出如何在 Kivy 中制作悬停效果也花了很多时间......）。

我实际上花了几个小时在 Stack Overflow 上搜索它并在 Stack Overflow 上搜索解决方案，但我找不到与此问题相关的任何内容。

我知道我可以添加边框并制作一个被边框包围的按钮，方法是在我的 Kivy 文件中包含以下代码：

canvas.before:    
     Color:
         rgba: #some color
     Line:
        rounded_rectangle: (self.pos[0], self.pos[1], self.size[0], self.size[1], self.border_radius)
        width: 2

但我不知道如何在悬停后更新 ButtonMenu 类中的 canvas.before 。

我还尝试将 RoundedRectangle 和 Line 结合起来，以便即使按钮为黑色并且仅更新背景颜色时也已经添加了边框，但它并没有真正给我想要的结果。

下面是我在Python文件中的代码：

from kivy.lang.builder import Builder
from kivy.properties import ListProperty
from kivy.uix.button import Button
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.core.window import Window
from kivymd.uix.behaviors.hover_behavior import HoverBehavior
Window.size = (1280, 720)


class MainMenu(Screen):
    pass


class WindowManager(ScreenManager):
    pass


class ButtonMenu(Button, HoverBehavior):
    background = ListProperty((0, 0, 0, 1))
    color = ListProperty((1, 1, 1, 1))

    def on_enter(self):
        self.background = (1, 222/255, 89/255, 1)
        self.color = (0, 0, 0, 1)

    def on_leave(self):
        self.background = (0, 0, 0, 1)
        self.color = (1, 1, 1, 1)


class TicTacToeUltimateApp(App):
    def build(self):
        return Builder.load_file('tictactoeultimate.kv')


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

我的 Kivy 文件：

WindowManager:
    MainMenu:

<MainMenu>:
    name: 'main_menu'

    FloatLayout:
        orientation: 'horizontal'
        size: 1280, 720
        canvas.before:
            Color:
                rgba: (1, 222/255, 89/255, 1)
            Rectangle:
                pos: self.pos
                size: self.size

        ButtonMenu:
            text: 'PLAY'
            pos_hint: {'center_x': .5, 'center_y': .5}

        ButtonMenu:
            text: 'SETTINGS'
            pos_hint: {'center_x': .5, 'center_y': .35}

        ButtonMenu:
            text: 'ABOUT'
            pos_hint: {'center_x': .5, 'center_y': .2}



<ButtonMenu>
    background_color: 0, 0, 0, 0
    background_normal: ''
    size_hint: 0.3, 0.11
    font_size: 26
    font_name: 'Roboto'
    bold: True
    canvas.before:
        Color:
            rgba: self.background
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: [28]
        Line:
            rounded_rectangle: (self.pos[0], self.pos[1], self.size[0], self.size[1], self.border_radius)
            width: 2

    `

为了获得悬停效果，我遵循了本教程，但它只展示了如何更新背景颜色的变化，而不是如何添加边框：

https://www.youtube.com/watch?v=fKFpxud0O6c

此外，我发现这个视频介绍了如何在按钮周围创建边框，但它只是展示了如何创建带边框的静态按钮。基本上我还是不知道如何让这个边框更新：

https://www.youtube.com/watch?v=Xv57jB_Xvqo&t=366s

提前感谢您的调查。

Answer 1

我认为只需为边框线添加单独的颜色即可实现你想要的：

canvas.before:
    Color:
        rgba: self.background
    RoundedRectangle:
        size: self.size
        pos: self.pos
        radius: [28]
    Color:
        rgba: (0, 0, 0, 1)  # separate color for line border
    Line:
        rounded_rectangle: (self.pos[0], self.pos[1], self.size[0], self.size[1], 28)
        width: 2