tkinter绘制组件（51）——高级滑动条

引言

在tkinter绘制组件（15）——调节框_tkintertable-CSDN博客详细讲述了如何构造一个基础滑动条scalebar。这里在此基础上，继续实现：

• 中段滑动条：以中间点为零点的滑动条；
• 双端滑动条：用于范围选择的滑动条

Smart-Space/TinUISlider: TinUI高级滑动条中控件单独提供：

pip install tinuislider

中段滑动条

中段滑动条CenterSlider的零点位于数据中位，其余绘制逻辑与交互逻辑均与基础滑动条一致。

因此，构建上来说，貌似没什么好说的，唯一需要变更的点，就是所有位置计算均以控件中心为抽象锚点，这样能够省很多事，再配合上TinUI自身提供的位置对齐与区域对齐，很容易实现。

接下来直接看如何使用吧。

禁用与激活

和TinUI原生滑动条一致，CenterSlider提供disable和active_state两个方法用来对滑动条禁用和激活。

获取值

defget(self):"""获取当前选中的值"""returnself.data[self.nowselect]

设置值

set(value)

直接设置在data中的值。

select(num, send=True)

设置选项索引，send若为False，则不触发回调函数。

例子

fromtkinterimportTkfromtinuiimportBasicTinUI,ExpandPanel,VerticalPaneldefon_resize(event):rp.update_layout(10,10,event.width-10,event.height-10)r=Tk()ui=BasicTinUI(r)ui.pack(fill='both',expand=True)slider=CenterSlider(canvas=ui,pos=(0,100),width=200,data=range(-10,11),start=3,# start是索引，不是值，所以这里是选中数据中的第4项anchor="center",command=lambdav:print(f"Selected:{v}"))# 获取当前值val=slider.get()print(f"Current value:{val}")slider.set(5)# 设置选中值为 5print(f"Value after set:{slider.get()}")rp=ExpandPanel(ui)vp=VerticalPanel(ui)rp.set_child(vp)ep1=ExpandPanel(ui)vp.add_child(ep1,weight=1)ep1.set_child(slider.uid)ui.bind("<Configure>",on_resize)r.mainloop()

双端滑动条

双端滑动条RangeSlider用于选择数值上下限范围。

classRangeSlider:def__init__(self,canvas:BasicTinUI,pos:tuple,width=200,fg="#4554dc",activefg="#4554dc",bg="#868686",buttonbg="#ffffff",buttonoutline="#cccccc",data=(1,2,3,4,5),start_left=None,start_right=None,direction="x",anchor="nw",command=None,):#...

这里除了要限制滑块本身不能超过数值范围外，还有一个约束，就是左右滑块不能越位。

def_drag_left(self,event):pos=self._event_pos(event)right_limit=self._get_button_pos(self.right_button)ifself.direction=="x":pos=min(pos,right_limit)pos=max(pos,self.dash[0])# 不超过最左边界else:pos=max(pos,right_limit)pos=min(pos,self.dash[0])# 不超过最下边界self._move_button(self.left_button,pos)def_drag_right(self,event):pos=self._event_pos(event)left_limit=self._get_button_pos(self.left_button)ifself.direction=="x":pos=max(pos,left_limit)pos=min(pos,self.dash[-1])# 不超过最右边界else:pos=min(pos,left_limit)pos=max(pos,self.dash[-1])# 不超过最上边界self._move_button(self.right_button,pos)def_release_left(self,_):self.canvas.tag_raise(self.left_button,self.right_button)self.left_index=self._snap(self.left_button)self.left_index=min(self.left_index,self.right_index)self._update_buttons()self._update_active()self._send()def_release_right(self,_):self.canvas.tag_raise(self.right_button,self.left_button)self.right_index=self._snap(self.right_button)self.right_index=max(self.right_index,self.left_index)self._update_buttons()self._update_active()self._send()

其中其他工具函数，请参考代码库。看名字应该也能看出来在干嘛。

另外，当点击选择时，应当移动最近的滑块：

def_click_track(self,event):pos=self._event_pos(event)left_pos=self._get_button_pos(self.left_button)right_pos=self._get_button_pos(self.right_button)ifabs(pos-left_pos)<=abs(pos-right_pos):ifself.direction=="x":pos=min(pos,right_pos)else:pos=max(pos,right_pos)self._move_button(self.left_button,pos)self._release_left(None)else:ifself.direction=="x":pos=max(pos,left_pos)else:pos=min(pos,left_pos)self._move_button(self.right_button,pos)self._release_right(None)

禁用与激活

同上一个控件。

获取值

通过get获取(l_value, r_value)。

设置值

通过set(left=None, right=None)设置值（注意，不是索引），若为None，则不变。

例子

defon_resize(event):rp.update_layout(10,10,event.width-10,event.height-10)r=Tk()ui=BasicTinUI(r)ui.pack(fill='both',expand=True)slider=CenterSlider(canvas=ui,pos=(0,100),width=200,data=range(-10,11),start=3,# start是索引，不是值，所以这里是选中数据中的第4项anchor="center",command=lambdav:print(f"Selected:{v}"))# 获取当前值val=slider.get()print(f"Current value:{val}")slider.set(5)# 设置选中值为 5print(f"Value after set:{slider.get()}")rp=ExpandPanel(ui)vp=VerticalPanel(ui)rp.set_child(vp)ep1=ExpandPanel(ui)vp.add_child(ep1,weight=1)ep1.set_child(slider.uid)ui.bind("<Configure>",on_resize)r.mainloop()

github项目

TinUI的github项目地址

pip下载

pipinstalltinui