《Python+Kivy(App开发)从入门到实践》自学笔记：简单UX部件——Slider滑块

​​​​​​章节知识点总揽

4.6 Slider滑块

        4.6.1 使用方法

        在kivy中，Slider滑块有着调用方便、兼容性好、可定义强、滑动平稳等优点。在一些项目的设置中，常常要设置Slider滑块，以此来让用户实时接收反馈信息，选择一个最合适的配置。

        在.py文件内使用该滑块需要引入Slider类，通过Slider类生成一个滑块并设置相关样式，再通过add_widget()方法添加到布局中即可，关键代码如下：

from kivy.uix.slider import Slider
sl = Slider(min=0,max=100)
self.add_widget(sl)

        新建main.py文件，具体代码如下：

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.slider import Slider
 
 
class SliderWidget(FloatLayout):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)
 
        sl = Slider(min = 0,max = 100)
        self.add_widget(sl)
 
 
class SliderApp(App):
    def build(self):
        return SliderWidget()
 
 
if __name__ == '__main__':
    SliderApp().run()

        执行main.py文件，结果如下图 ：

        相比之下，在.kv文件内使用它就非常简单，无需引入即可使用，关键代码如下：

Slider：
    min:0
    max:100

        修改main.py文件，删除布局部分，具体内容如下：

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.slider import Slider
class SliderWidget(FloatLayout):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)
class SliderApp(App):
    def build(self):
        return SliderWidget()
if __name__ == '__main__':
    SliderApp().run()

        根据main.py文件中SliderApp()类，新建slider.kv文件，内容如下：

<SliderWidget>:
	Slider:
		min:0
		max:100

        运行结果与之前一致。

4.6.2 常用属性

        在Slider小部件中，除了上一节常用的min和max两个属性外，她还支持设置方向、范围、步长、颜色、当前值、轨迹等内容，关于Slider滑块的常用属性具体如下标：

Slider常用属性

        实例：设置Slider滑块的常用属性

        在main.py文件中使用BoxLayout布局加载slider.kv文件。在.kv文件中添加两个滑块，并为其设置前面Image图片的常用属性实例的部分属性（orientation、min、max等），具体代码如下：

        main.py文件内容：

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
class SliderWidget(BoxLayout):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)
class SliderApp(App):
    def build(self):
        return SliderWidget()
if __name__ == '__main__':
    SliderApp().run()

        slider.kv文件内容：

<SliderWidget>:
	orientation:'vertical'
 
	Slider:
		min:0
		max:100
	Slider:
		id:slider_move
		orientation:'vertical'
		min:-100
		max:100
		step:10
		value_track:True
		value_track_color:[1,0,0,1]
		value:25
		pos:200,400

        执行main.py文件，结果如下图：

4.6.3 触发事件

        在Slider小部件中没有专属的触发事件，但可以使用Kivy提供的移动和触摸事件：

                on_touch_down：在点击部件时触发

                on_touch_up：在释放部件时触发

                on_touch_move：移动时触发

        实例：设置Slider滑块的触发事件

        想要设置Slider滑块的触发事件，首先需要在slider.kv文件内添加上述的触发事件，并设置对应的回调方法（如果方法是在.py内，则使用“root.方法名称”即可），关键代码如下：        

<SliderWidget>:
    Slider:
        min:0
        max:100
        on_touch_down:print('down')
        on_touch_up:print('up')
        on_touch_move:print('move')

        将关键代码加入slider.kv文件，如下：

<SliderWidget>:
	orientation:'vertical'
 
	Slider:
		min:0
		max:100
		on_touch_down:print('down')
		on_touch_up:print('up')
		on_touch_move:print('move')
        	
 
	Slider:
		id:slider_move
		orientation:'vertical'
		min:-100
		max:100
		step:10
		value_track:True
		value_track_color:[1,0,0,1]
		value:25
		pos:200,400

        执行main.py文件，结果如下图：

上一篇：简单UX部件——CheckBox复选框

下一篇：简单UX部件——ProgressBar进度条