tkinter绘制组件（42）——工具栏按钮组件

news2024/11/14 19:15:40

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