Implementation of hover event in Kivy control

1. Import dependency module

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. Customize layout controls and buttons

We need to customize the overall layout class of the program MyLayout, which is the layout of the entire application.

class MyLayout(BoxLayout):
    pass

The customized HoverButton can realize the effect of mouse moving in and out. In this class, when initializing, it is necessary to bind the corresponding processing method of the mouse coordinate position to detect whether the mouse position enters the button in real time. If it does, it will change the corresponding properties. If the mouse is removed, it will return to the original style.

 1 class HoverButton(Button):
 2     def __init__(self, **kwargs):
 3         # Call the initialization function of the parent class
 4         super(HoverButton, self).__init__(**kwargs)
 5         # Set the control to fill horizontally and set the height vertically
 6         self.size_hint = (1, None)
 7         self.height = 50
 8         # binding[subscribe]Event handling method of mouse position change
 9         Window.bind(mouse_pos=self.on_mouse_pos)
10     
11     # Mouse position processing method
12     def on_mouse_pos(self, *args):
13         # Determine whether the control is in root In root control
14         if not self.get_root_window():
15             return
16         # Get mouse position data
17         pos = args[1]
18         # Check whether the mouse position is in the control
19         if self.collide_point(*pos):
20             # If on a control, the style method entered by the mouse is called
21             Clock.schedule_once(self.mouse_enter_css, 0)
22         else:
23             # If on a control, the style method of mouse out is called
24             Clock.schedule_once(self.mouse_leave_css, 0)
25 
26     def mouse_leave_css(self, *args):
27         # Reset background and mouse style
28         self.background_normal = './imgs/button_normal.png'
29         Window.set_system_cursor('arrow')
30 
31     def mouse_enter_css(self, *args):   
32         self.background_normal = './imgs/button_down.png'
33         Window.set_system_cursor('hand')

3. Layout in kV

Generally, after defining the layout class, we will configure the layout details in 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. Define App class

class MainApp(App):
    def build(self):
        # Form not full screen
        Window.fullscreen = False
        # load kv File layout data
        Builder.load_file('./kvs/test.kv')
        # return root Root control
        return MyLayout()

5. Test results

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

After running, the effect is still OK. Moving the mouse into any button can change the background picture:

But there is a problem. All buttons only have the last one. When the mouse moves in, the mouse style becomes a small hand. The buttons in front don't seem to work, but the background image style can work. It seems that the knowledge of kivy needs to be accumulated slowly.

6. Summary

  1. The hover function requires the schedule of the Clock class_ Once (func, second) method

  2. Different control background color settings are different, except for these properties: background_color, background_normal, background_down, background_image. Sometimes it can be used canvas.before To set the background color

  3. Mouse style in the same kind of control, only the last control works, I don't know why.

Tags: Python

Posted on Wed, 27 May 2020 01:18:21 -0400 by aldoh