tkinter绘制组件（48）——日期与时间滚动选择器

引言

TinUI的日期与时间选择器非原版TinUI功能控件，需安装tinuipicker库：

pip install tinuipicker

项目地址：Smart-Space/TinUIPicker: TinUI高级滚动选择器。

在用AI为TinUI写日期滚动选值框-CSDN博客一文中，讲解了日期滚动选择器，本文不再赘述，而是以另一个控件——时间选择器——讲解新的picker相较于原版picker的改进细节。

多种格式

tinuipicker的时间选择器允许12小时和24小时（默认）制，同时可以指定是否让秒可选。以上格式通过初始化参数指定：

classTinUITimePicker:def__init__(self,tinui,pos,font=("微软雅黑",10),is_24h=True,show_sec=True,now=datetime.now(),command=None,anchor='nw',**kwargs):# ...ifself.is_24h:self.res_hour=str(now.hour).zfill(2)self.res_ampm=""else:h=now.hour self.res_ampm="AM"ifh<12else"PM"h12=h%12self.res_hour=str(12ifh12==0elseh12).zfill(2)# ...

对应到视图元素，则在_setup_picker_ui中确定选择器的数量和尺寸。

def_setup_picker_ui(self):"""初始化 Toplevel 弹出层及其内部选择列"""# 根据制式动态计算宽度col_widths=[50,60,60,60]ifnotself.is_24helse[60,60,60]ifnotself.show_sec:col_widths.pop()width=sum(col_widths)+(len(col_widths)*3)+12height=260# ...

选项文本居中

TinUI原版picker中，选项均为左对齐，在这里改为居中显示：

def_loaddata(self,box,items,mw,col_type):"""填充列数据并绑定滚动与点击"""box.delete("all")box.choices={}y_ptr=5foriinitems:text_id=box.create_text((mw/2,y_ptr+2),text=i,fill=self.cfg['fg'],font=self.font,anchor="n")# ...# ...

选中项居中

TinUI原版picker中，不具有该功能。在日期和时间选择器中，会将当前选择项（不一定已经确认）尽可能放在选择器中间。具体实现就是判断当前选项中心和视图中心的单位差，再除以总可滚动区域的高度，就可以得到纵向视图的位置（要求0~1）。

defshow(self,event):"""动画显示弹出框"""# 选中项居中foriinrange(len(self.pickerbars)):bbox=self.pickerbars[i].bbox(self.sel_backs[i])centery=(bbox[1]+bbox[3])/2view_centery=self.pickerbars[i].winfo_height()/2scroll_region=self.pickerbars[i].cget("scrollregion").split()scroll_y1,scroll_y2=int(scroll_region[1]),int(scroll_region[3])total_height=scroll_y2-scroll_y1 self.pickerbars[i].yview_moveto((centery-view_centery)/total_height)# ...

self.sel_backs记录了当前被选择项目的背景元素。

选中指定

初始指定

初始化通过now参数指定的时间，会以如下方式绑定到后端数据：

# 小时初始化代码已在上文提及data_sets.append([str(m).zfill(2)forminrange(0,60)])# 分ifself.show_sec:data_sets.append([str(s).zfill(2)forsinrange(0,60)])# 秒

在_loaddata会判定当前选项文本是否被选中：

def_loaddata(self,box,items,mw,col_type):"""填充列数据并绑定滚动与点击"""box.delete("all")box.choices={}y_ptr=5foriinitems:#...is_sel=(i==box.newres)ifis_sel:self.sel_backs.append(back_id)box.itemconfig(back_id,fill=self.cfg['onbg'])box.itemconfig(text_id,fill=self.cfg['onfg'])#...# ...

手动指定

TinUITimePicker提供set_time方法用于指定选中时间：

defset_time(self,hour:int=None,minute:int=None,second:int=None):base_index=0ifself.is_24helse1ifhourisnotNone:ifnotself.is_24h:ifhour>12:hour-=12_,t,_,_=next(islice(self.pickerbars[0].choices.values(),1,2))else:_,t,_,_=next(islice(self.pickerbars[0].choices.values(),0,1))self._pick_sel_it(self.pickerbars[0],t,0)_,t,_,_=next(islice(self.pickerbars[base_index].choices.values(),hour-1,hour))self._pick_sel_it(self.pickerbars[base_index],t,base_index)ifminuteisnotNone:index=minute _,t,_,_=next(islice(self.pickerbars[base_index+1].choices.values(),index,index+1))self._pick_sel_it(self.pickerbars[base_index+1],t,base_index+1)ifsecondisnotNoneandself.show_sec:index=second _,t,_,_=next(islice(self.pickerbars[base_index+2].choices.values(),index,index+1))self._pick_sel_it(self.pickerbars[base_index+2],t,base_index+2)self._confirm()

每个选项均各自选中后，调用_confirm进行确定，避免功能完全相同的代码的重复。另外要注意的是，这里的分钟和秒的执行判断为is not None，因为0分、0秒是可选的。

效果

github项目

TinUI的github项目地址

pip下载

pipinstalltinui