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

静候光阴

已于 2023-08-12 20:14:39 修改

阅读量828

点赞数 1

分类专栏： Kivy基本使用学习专栏文章标签： python 前端 kivy

于 2022-11-03 16:42:16 首次发布

本文链接：https://blog.csdn.net/lstef/article/details/127669208

版权

Kivy基本使用学习专栏专栏收录该内容

64 篇文章 70 订阅

订阅专栏

章节知识点总揽

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常用属性

属性	说明
orientation	滑块的方向
min	允许的最小值，默认为0
max	允许的最大值，默认为100
range	滑块的范围，格式为(min,max)
step	滑块步长，默认为1
value	滑块使用的当前值，默认为0
value_normalized	value/max标准化值，必须为0-1之间
value_pos	内部光标的位置，基于标准化值
value_track	滑块是否现实轨迹
value_track_color	滑块轨迹显示的颜色，格式为：rgba，默认为[1,1,1,1]
value_track_width	滑块的轨迹宽度，默认为3sp
background_width	滑块的背景宽度，用于水平和垂直方向，默认为36sp
border_horizontal	用于沿水平方向绘制滑块背景的边框，默认为[0,18,0,18]
border_vertical	用于沿垂直方向绘制滑块背景的边框，默认为[18,0,18,0]
cursor_width	光标图像的宽度，默认为32sp
cursor_height	光标图像的高度，默认为32sp
cursor_size	光标图像的大小
padding	滑块的填充，默认为16sp
sensitivity	点击小部件的整体，还是点击整个光标部分
background_disabled_horizontal	默认为“kivy\tools\theming\defaulttheme\sliderh_background_disabled.png”
background_disabled_vertical	在垂直方向上禁用滑块时的背景，默认为“sliderv_background_disabled.png”
background_disabled_vertical	在水平方向上使用滑块时的背景，默认为“sliderh_background.png”
background_vertical	在垂直方向上使用滑块时的背景，默认为“sliderv_background.png”
cursor_disabled_image	禁用滑块时光标图像使用的路径，默认为“slider_cursor_disabled.png”
cursor_image	光标图像使用的路径，默认为“slider_cursor.png”

实例：设置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文件，结果如下图：