tkinter绘制组件（42）——工具栏按钮组件
- 引言
- 布局
- 函数结构
- 背景板
- 创建按钮
- 移动背景板
- 完整代码函数
- 效果
- 测试代码
- 最终效果
- github项目
- pip下载
- 结语
引言
在TinUI中，并不存在工具栏这个概念，但是可以通过使用BasicTinUI控件，在程序界面中创造丰富的工具栏，不过这终究需要开发者自己来设计。当我们只想要一个简单的、带有按钮、分割线的工具栏时，这就没必要重新设计一个了。
我们来创造一个新的控件，工具栏按钮组件barbutton，来创建一组工具栏按钮。
布局
函数结构
def add_barbutton(self,pos:tuple,font='微软雅黑 14',fg='#636363',bg='#f3f3f3',line='#f3f3f3',linew=0,activefg='#191919',activebg='#eaeaea',activeline='#eaeaea',sepcolor='#e5e5e5',content=(('保存','\uE74E',None),('','\uE792',None),'',('','\uE74D',None)),anchor='nw'):#绘制一个工具栏按钮组件
"""
...
sepcolor::分割线颜色
content::按钮组内容
"""
背景板
因为在开始创建的时候，我们需要一个画布对象来创建uid，设计上，TinUI一般以大范围元素作为id来源。因此，我们需要创建边框和背景元素，但不需要急着给它们安排位置，只要创建出来就行了。
font=tkfont.Font(font=font)
font_size=float(font.cget('size'))/72*96
pixel=round(font_size/2)*2
del font_size
outline=self.create_polygon(*pos,*pos,width=9,fill=line,outline=line)
uid='barbutton'+str(outline)
self.itemconfig(outline,tags=uid)
buttons_id=uid+'button'
back=self.create_polygon(*pos,*pos,width=7,fill=bg,outline=bg,tags=uid)
值得注意的是，这里我们重新创建了font对象，是为了获取字体大小，计算分割线的高度。
此外，我们使用buttons_id=uid+'button'的方式表示按钮和分割线，其中，按钮应当是add_button2()返回值的最后一个属性，代表圆角按钮的所有元素。
创建按钮
这是重头戏，但是非常简单，我们首先来约定一下content的内容。
(
('text','\ue70e',None),
('button text','Segoe Fluent Icons code',command),
'',#分割线
...,
(...)
)
就这么简单。
符号的添加得益于button2同期对于{Segoe Fluent Icons}的单独支持。
接下来，我们就可以创建按钮了，注意content里的''，这是分割线的意思。
buttons=list()
for i in content:
if i=='':
position=new_pos()
sp_pos=(position[0],position[1]-pixel/2,position[0],position[1]+pixel/2)
self.create_line(sp_pos,width=1,fill=sepcolor,tags=(uid,buttons_id))
continue
position=new_pos()
button=self.add_button2(position,text=i[0],icon=i[1],font=font,fg=fg,bg=bg,line=line,linew=linew,activefg=activefg,activebg=activebg,activeline=activeline,anchor='w',command=i[2])
self.addtag_withtag(buttons_id,button[-1])
self.addtag_withtag(uid,button[-1])
buttons.append(button)
移动背景板
当按钮全部创建完毕后，我们就可以根据button_id确定背景板的大小和位置了。
bbox=self.bbox(buttons_id)
bbox=(bbox[0],bbox[1],bbox[2],bbox[1],bbox[2],bbox[3],bbox[0],bbox[3])
self.coords(back,bbox)
self.coords(outline,bbox)
self.__auto_anchor
完整代码函数
def add_barbutton(self,pos:tuple,font='微软雅黑 14',fg='#636363',bg='#f3f3f3',line='#f3f3f3',linew=0,activefg='#191919',activebg='#eaeaea',activeline='#eaeaea',sepcolor='#e5e5e5',content=(('保存','\uE74E',None),('','\uE792',None),'',('','\uE74D',None)),anchor='nw'):#绘制一个工具栏按钮组件
def new_pos():
#获取最新位置
bbox=self.bbox(buttons_id)
if bbox:
return bbox[2]+5,(bbox[1]+bbox[3])/2
else:
return pos
#获取字体大小，转化为像素大小
font=tkfont.Font(font=font)
font_size=float(font.cget('size'))/72*96
pixel=round(font_size/2)*2
del font_size
outline=self.create_polygon(*pos,*pos,width=9,fill=line,outline=line)
uid='barbutton'+str(outline)
self.itemconfig(outline,tags=uid)
buttons_id=uid+'button'
back=self.create_polygon(*pos,*pos,width=7,fill=bg,outline=bg,tags=uid)
#左侧纵轴线对齐，anchor=w
buttons=list()
for i in content:
if i=='':
position=new_pos()
sp_pos=(position[0],position[1]-pixel/2,position[0],position[1]+pixel/2)
self.create_line(sp_pos,width=1,fill=sepcolor,tags=(uid,buttons_id))
continue
position=new_pos()
button=self.add_button2(position,text=i[0],icon=i[1],font=font,fg=fg,bg=bg,line=line,linew=linew,activefg=activefg,activebg=activebg,activeline=activeline,anchor='w',command=i[2])
self.addtag_withtag(buttons_id,button[-1])
self.addtag_withtag(uid,button[-1])
buttons.append(button)
bbox=self.bbox(buttons_id)
bbox=(bbox[0],bbox[1],bbox[2],bbox[1],bbox[2],bbox[3],bbox[0],bbox[3])
self.coords(back,bbox)
self.coords(outline,bbox)
self.__auto_anchor(uid,pos,anchor)
return outline,back,buttons,uid
效果
测试代码
b.add_barbutton((1500,150))
最终效果
github项目
TinUI的github项目地址
pip下载
pip install tinui
结语
如果想使用界面菜单，可以直接使用menubutton，去掉标识符即可。
🔆tkinter创新🔆
