当前位置:   article > 正文

《Python+Kivy(App开发)从入门到实践》自学笔记:简单UX部件——Button按钮_kivy开发app教程

kivy开发app教程

章节知识点总揽

4.1 Button按钮

        4.1.1 使用方法

        Kviy中的Button控件常用于在Python应用程序中添加按钮,在按钮上可以放置文本或图像,也可以监听用户行为等。

        实例:设置Button按钮的使用方法

        在.py文件内,使用按钮需要引入Button类,通过Button类生成一个按钮,再通过add_widget()方法添加到布局中即可,具体关键代码如下:

  1. #导入控件
  2. from kivy.uix.button import Button
  3. #指定属性
  4. bt = Button(text='Button 01')
  5. #添加到布局中
  6. self.add_widget(bt)

        结合第二章布局知识,使用BoxLayout布局制作一个只有一个按钮的界面布局,代码如下: 

  1. #导入app类
  2. from kivy.app import App
  3. #导入布局类
  4. from kivy.uix.boxlayout import BoxLayout
  5. #导入控件
  6. from kivy.uix.button import Button
  7. class BoxLayoutWidget(BoxLayout):
  8. def __init__(self,**kwargs):
  9. super().__init__(**kwargs)
  10. #指定属性
  11. bt = Button(text='Button 01')
  12. #添加到布局中
  13. self.add_widget(bt)
  14. class BoxApp(App):
  15. def build(self):
  16. return BoxLayoutWidget()
  17. if __name__=='__main__':
  18. BoxApp().run()

         当然也可以像第二章一样,使用.kv文件实现。相比之下,在.kv文件内使用它就非常简单,无需引入即可直接使用,具体关键代码如下:

  1. Button:
  2. text:'Button 02'

        为了在.kv文件中实现上述功能,修改main.py文件,删除布局内容部分,具体如下:

  1. from kivy.app import App
  2. from kivy.uix.button import Button
  3. from kivy.uix.boxlayout import BoxLayout
  4. #布局类
  5. class BoxLayoutWidget(BoxLayout):
  6. #初始化
  7. def __init__(self,**kwargs):
  8. super().__init__(**kwargs)
  9. class BoxApp(App):
  10. #实现App类的build()方法(继承自App类)
  11. def build(self):
  12. #返回根控件
  13. return BoxLayoutWidget()
  14. if __name__ == '__main__':
  15. #启动程序
  16. BoxApp().run()

        根据main.py文件中定义的BoxApp类名字,对应的新建Box.kv文件,内容如下:

  1. <BoxLayoutWidget>:
  2. Button:
  3. text:'Button 02'

        执行main.py文件,即可获得上述效果

        注意:如果未指定按钮的位置和大小,在运行程序时,Kivy会自动放大根控件,并使整个按钮充满窗口。另外由于.py优先级更高,因此会覆盖掉上述代码中的“Button 02”按钮。

        4.1.2 常用属性

        为了美观,Kivy提供了Button按钮常用的属性来改变样式,关于Button按钮的常用属性及说明如下所示:

属        性说                 明
background_color按钮背景颜色,rgba格式,默认为灰色
text按钮显示的文本
font_size文本字体大小,默认为15sp
color文本字体颜色,rgba格式,默认为白色[1,1,1,1]
state按钮状态,默认为“normal”,可设置成“down”
disabled如果为True时则禁用按钮,默认为False
background_disabled_down默认为“Kivy/tools/theming/defaulttheme/button_disabled_pressed.png”属性
background_disabled_normal默认为“Kivy/tools/theming/defaulttheme/button_disabled.png”属性
background_down按下按钮时显示的图像,默认为“kivy/tools/theming/defaulttheme/button_pressed.png”属性
background_normal按下按钮时显示的图像,默认为“kivy/tools/theming/defaulttheme/button.png”属性
border与background_normal和background_down属性一起使用,可以用于自定义背景

        实例:设置Button按钮的常用属性

        新建一个main.py文件,用于加载button.kv文件,代码如下:

  1. from kivy.app import App
  2. from kivy.uix.floatlayout import FloatLayout
  3. class ButtonFloatLayout(FloatLayout):
  4. def __init__(self,**kwargs):
  5. super().__init__(**kwargs)
  6. class ButtonApp(App):
  7. def build(self):
  8. return ButtonFloatLayout()
  9. if __name__ == '__main__':
  10. ButtonApp().run()

        这里将在button.kv文件内演示Button的属性,具体代码如下:

  1. <MyButton@Button>
  2. size_hint:.2,.15
  3. <ButtonFloatLayout>:
  4. Button:
  5. text:'Button 00'
  6. size_hint:.2,.15
  7. pos:65,400
  8. background_normal:''
  9. background_color:[.1,.5,.5,1]
  10. MyButton:
  11. text:'Button01'
  12. pos:315,400
  13. disabled:True
  14. MyButton:
  15. text:'Button 02'
  16. color:[.8,.3,.3,1]
  17. pos:565,400
  18. MyButton:
  19. text:'Button 03'
  20. font_size:15
  21. pos:65,150
  22. MyButton:
  23. text:'Button 04'
  24. font_size:25
  25. pos:315,150
  26. state:'normal'
  27. MyButton:
  28. text:'Button 05'
  29. pos:565,150
  30. state:'down'

运行main.py文件,结果如下图:

2efffda84c5c4b619ad27fbad5680fda.png

         注意:Kivy不能识别.kv文件内的中文编码,直接添加中文时会抱错,如果学要添加中文,请查阅第一章内容:《Python+Kivy(App开发)从入门到实践》自学笔记:解决Kivy不能显示中文问题_静候光阴的博客-CSDN博客

        4.1.3 触发事件

        Button按钮主要包括以下两个触发事件:

                on_press:按下按钮时触发事件

                on_release:按下按钮并释放时,触发该事件

        实例:设置Button按钮并触发事件

        通过.py文件添加Button按钮,设置触发事件的回调函数,或者通过bind方法重新绑定后,再添加到布局内。由于触发事件传递的参数有2个,所以在回调函数里需要2个参数来匹配,具体代码如下:

  1. from kivy.app import App
  2. from kivy.uix.floatlayout import FloatLayout
  3. class ButtonFloatLayout(FloatLayout):
  4. def __init__(self,**kwargs):
  5. super().__init__(**kwargs)
  6. from kivy.uix.button import Button
  7. bt = Button(text='Button',on_release=self.release_button)
  8. bt.bind(on_press=self.press_button)
  9. self.add_widget(bt)
  10. def press_button(self,arg):
  11. #按下按钮触发事件的回调函数
  12. print('press_button is running')
  13. def release_button(self,arg):
  14. #按下按钮并释放时触发事件的回调函数
  15. print('release_button is running')
  16. class ButtonApp(App):
  17. def build(self):
  18. return ButtonFloatLayout()
  19. if __name__ == '__main__':
  20. ButtonApp().run()

运行效果如下:

71ec6160aa764db78587b3d3c4e46536.png

         使用.kv文件添加按钮时,将main.py文件中的布局内容删除,内容如下:

  1. from kivy.app import App
  2. from kivy.uix.floatlayout import FloatLayout
  3. class ButtonFloatLayout(FloatLayout):
  4. def __init__(self,**kwargs):
  5. super().__init__(**kwargs)
  6. def press_button(self,arg):
  7. #按下按钮触发事件的回调函数
  8. print('press_button is running')
  9. def release_button(self,arg):
  10. #按下按钮并释放时触发事件的回调函数
  11. print('release_button is running')
  12. class ButtonApp(App):
  13. def build(self):
  14. return ButtonFloatLayout()
  15. if __name__ == '__main__':
  16. ButtonApp().run()

根据main.py内ButtonApp()类名称,新建button.kv文件,具体内容如下:

  1. <ButtonFloatLayout>:
  2. Button:
  3. text:'Button'
  4. size_hint:.2,.15
  5. pos_hint:{'center_x':.5,'center_y':.5}
  6. background_normal:''
  7. background_color:[.1,.5,.5,1]
  8. on_release:root.release_button(self)
  9. on_press:root.press_button(self)

        注:以上代码最后两行,原书内容为:

  1. on_release:root.release_button()
  2. on_press:root.press_button()

        运行后报错,提示缺少参数。在调用以上两个方法的时候,传入'self'参数,运行正常,具体如下:

e9a4d3056ea2429788ad9b379c6db195.png

        如果想要在一个触发事件内调用多个回调函数,只需要在“:”后换行,并且每行添加对应的回调函数即可,也可以直接使用python语言中的内置方法,具体如下:

  1. <ButtonFloatLayout>:
  2. Button:
  3. text:'Button'
  4. size_hint:.2,.15
  5. pos_hint:{'center_x':.5,'center_y':.5}
  6. background_normal:''
  7. background_color:[.1,.5,.5,1]
  8. on_release:
  9. root.release_button(self)
  10. print('cocpy.com')
  11. on_press:root.press_button(self)

        注意:这里要特别注意缩进,在Python语言中,对缩进的要求很严格,且部分编辑器不能直接将<Tab>键替换为4个空格。

        运行结果如下:

ae3c140bffed4998a5d475803df614b5.png

上一篇:基本图形绘制——动手实践——画板——清屏

下一篇:简单UX部件——Label标签

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/471508
推荐阅读
相关标签
  

闽ICP备14008679号