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按鈕可以實作滑鼠移入移出的效果，在這個類里，在初始化的時候就要系結滑鼠坐標的位置相應處理方法，實時地檢測滑鼠的位置是否進入到了按鈕內部，如果進入了則更改相應的屬性，滑鼠移除了則恢復到原來的樣式，
1 class HoverButton(Button): 2 def __init__(self, **kwargs): 3 # 呼叫父類的初始化函式 4 super(HoverButton, self).__init__(**kwargs) 5 # 設定控制元件水平充滿，垂直自定高度 6 self.size_hint = (1, None) 7 self.height = 50 8 # 系結[訂閱]滑鼠位置變化事件處理方法 9 Window.bind(mouse_pos=self.on_mouse_pos) 10 11 # 滑鼠位置處理方法 12 def on_mouse_pos(self, *args): 13 # 判斷控制元件是否在root根控制元件中 14 if not self.get_root_window(): 15 return 16 # 獲取滑鼠位置資料 17 pos = args[1] 18 # 檢查滑鼠位置是否在控制元件內 19 if self.collide_point(*pos): 20 # 如果在控制元件上，則呼叫滑鼠進入的樣式方法 21 Clock.schedule_once(self.mouse_enter_css, 0) 22 else: 23 # 如果在控制元件上，則呼叫滑鼠移出的樣式方法 24 Clock.schedule_once(self.mouse_leave_css, 0) 25 26 def mouse_leave_css(self, *args): 27 # 重設背景和滑鼠樣式 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. 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. 總結
-
hover功能需要用到Clock類的schedule_once(func, second)方法 -
不同的控制元件背景顏色的設定有所不同，不外乎這幾個屬性：
background_color,background_normal,background_down,background_image，有時候還可以使用canvas.before來設定背景色 -
滑鼠的樣式在同一種類的控制元件中，只有最后一個控制元件起作用，本人暫時不知道什么原因，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/142360.html
標籤：Python
上一篇：Kivy主表單大小的控制