Kivy控件的hover事件实现

1. 导入依赖模块

from kivy.app import App
from kivy.core.window import Window
from kivy.clock import Clock
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.uix.button import Button

2. 自定义布局控件和按钮

我们需要自定义程序的整体布局类MyLayout，这个类就是整个应用的布局。

class MyLayout(BoxLayout):
    pass

自定义的HoverButton按钮可以实现鼠标移入移出的效果。在这个类里，在初始化的时候就要绑定鼠标坐标的位置相应处理方法，实时地检测鼠标的位置是否进入到了按钮内部，如果进入了则更改相应的属性，鼠标移除了则恢复到原来的样式。

class HoverButton(Button):
    def __init__(self, **kwargs):
        # 调用父类的初始化函数
        super(HoverButton, self).__init__(**kwargs)
        # 设置控件水平充满，垂直自定高度
        self.size_hint = (1, None)
        self.height = 50
        # 绑定[订阅]鼠标位置变化事件处理方法
        Window.bind(mouse_pos=self.on_mouse_pos)
    
    # 鼠标位置处理方法
    def on_mouse_pos(self, *args):
        # 判断控件是否在root根控件中
        if not self.get_root_window():
            return
        # 获取鼠标位置数据
        pos = args[1]
        # 检查鼠标位置是否在控件内
        if self.collide_point(*pos):
            # 如果在控件上，则调用鼠标进入的样式方法
            Clock.schedule_once(self.mouse_enter_css, 0)
        else:
            # 如果在控件上，则调用鼠标移出的样式方法
            Clock.schedule_once(self.mouse_leave_css, 0)

    def mouse_leave_css(self, *args):
        # 重设背景和鼠标样式
        self.background_normal = './imgs/button_normal.png'
        Window.set_system_cursor('arrow')

    def mouse_enter_css(self, *args):   
        self.background_normal = './imgs/button_down.png'
        Window.set_system_cursor('hand')

3. kv中的布局

一般定义好布局类后，我们会在kv中配置布局细节

<MyLayout>:
    orientation: 'horizontal'
    padding: 2
    spacing: 2
    canvas.before:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            size: self.size
            pos: self.pos
    HoverButton:
        text: 'btn1'
    HoverButton:
        text: 'btn2'
    HoverButton:
        text: 'btn3'
    HoverButton:
        text: 'btn4'

4. 定义App类

class MainApp(App):
    def build(self):
        # 窗体不全屏显示
        Window.fullscreen = False
        # 加载kv文件布局数据
        Builder.load_file('./kvs/test.kv')
        # 返回root根控件
        return MyLayout()

5. 测试结果

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

运行之后，效果还是可以的，鼠标移入任何按钮中都能产生背景图片的变更：

但是有一个问题，所有的按钮只有最后一个按钮，当鼠标移入时鼠标样式变成了小手，前面的按钮好像没有起作用，但是背景图片样式都能起作用。看来对kivy的知识还需要慢慢积累。

6. 总结

1. hover功能需要用到Clock类的schedule_once(func, second)方法

2. 不同的控件背景颜色的设置有所不同，不外乎这几个属性：background_color, background_normal, background_down, background_image。有时候还可以使用canvas.before来设置背景色

3. 鼠标的样式在同一种类的控件中，只有最后一个控件起作用，本人暂时不知道什么原因。