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

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.

27 May 2020, 01:18 | Views: 7020