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

核心思路是通过动态控制边框颜色的透明度实现悬停时显示边框、非悬停时隐藏边框，以下是具体修改步骤：

1. 更新Python代码 #

给ButtonMenu类添加border_color属性（默认透明），并在悬停事件中更新该属性：

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
from kivy.app import App  # 补充原代码缺失的App导入
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))
    border_color = ListProperty((0, 0, 0, 0))  # 默认透明，隐藏边框
    border_radius = ListProperty([28])  # 统一边框与背景的圆角值

    def on_enter(self):
        self.background = (1, 222/255, 89/255, 1)
        self.color = (0, 0, 0, 1)
        self.border_color = (0, 0, 0, 1)  # 悬停时显示黑色边框

    def on_leave(self):
        self.background = (0, 0, 0, 1)
        self.color = (1, 1, 1, 1)
        self.border_color = (0, 0, 0, 0)  # 离开时隐藏边框


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


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

2. 更新KV文件 #

调整ButtonMenu的canvas.before部分，将边框颜色绑定到border_color属性，确保圆角参数与背景一致：

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: self.border_radius
        # 动态控制边框显示
        Color:
            rgba: self.border_color
        Line:
            rounded_rectangle: (self.pos[0], self.pos[1], self.size[0], self.size[1], self.border_radius[0])
            width: 2

关键说明 #

• 通过border_color的透明度切换（0为透明、1为不透明），实现边框的显示/隐藏
• 统一border_radius与背景圆角值，保证边框和背景的圆角匹配
• 悬停事件中同步更新背景色、文字色和边框色，完成完整交互效果

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