tkinter绘制组件（17）——气泡提示-CSDN博客

本文链接：https://blog.csdn.net/tinga_kilin/article/details/120918293

tkinter绘制组件（17）——气泡提示

引言
布局
效果
github项目
pip下载
结语

引言

气泡提示框的用处很大，一般地，它会以一种特殊的样式存在于整个GUI界面中的以下部分位置，如果我们不去激活它，那么它几乎不会占用用户界面。此外，用户很容易发现它，并且需要时是可以将鼠标至于其上，来获取帮助信息。

因此，我们在画布上绘制出这一种组件。

但是，受tkinter画布无法控制组件与画布对象的最高级，气泡提示组件无法覆盖Widget的组件类。

布局

函数结构

def add_info(self,pos:tuple,font='微软雅黑 9',fg='#0078d4',bg='white',info_text='',info_font=('微软雅黑','12'),info_width=200,info_fg='black'):#绘制提示框
    '''
    pos::位置
    font::提示标识符“？”的字体
    fg::提示标识符颜色
    bg::整个组件的背景色
    info_text::提示文本
    info_font::提示文本字体
    info_width::提示文本宽度
    info_fg::提示文本颜色
    '''

创建标识符

就目前而言，我并不希望TinUI info组件的提示标识符能够被自由定义，因为这样会降低TinUI界面的整体美观度。所以，我们目前就以“？”作为标识符。

还是那一句话：因为前面十几篇的经验，我们已经能足够熟练地排版绘制画布对象。这句话以后就不说了，关于绘制部分我只做说明，不会进行详细讲解，具体参考前面几篇文章。

标识符有椭圆外框和标识符文字构成。

现在，直接绘制标识符：

text=self.create_text(pos,anchor='nw',text='?',font=font,fill=fg)
bbox=self.bbox(text)
back=self.create_oval((bbox[0]-2,bbox[1]-2,bbox[2]+2,bbox[3]+2),fill=bg,outline=fg,width=2)
self.tkraise(text)

创建提示信息

根据参数获取到的自定义提示信息，我们将要绘制气泡提示的主体。这里需要注意一点，那就是气泡提示的文本和背景不能够遮挡标识符，否则无法绑定标识符的事件，也无法完成我们期望标识符完成的工作。

现根据排版计算绘制提示文本：

info=self.create_text((bbox[2]+10,(bbox[3]+bbox[1])//2),anchor='nw',text=info_text,font=info_font,fill=info_fg,width=info_width)
ibbox=self.bbox(info)
info_back=self.create_rectangle((ibbox[0]-2,ibbox[1]-2,ibbox[2]+2,ibbox[3]+2),width=1,fill=bg,outline=fg)
self.tkraise(info)

因为提示文本的显示取决于鼠标放置于标识符上方，而且，提示框背景和文本时同步显示或隐藏的，因此，为了方便，我们为其添加tag标识符。

infotagname='info'+str(info)+str(info_back)
self.addtag_withtag(infotagname,info)
self.addtag_withtag(infotagname,info_back)
self.itemconfig(infotagname,state='hidden')

很多人看到，在TinUI中，每次绑定tag标识符都是使用了str(画布对象)的方法，这么做是因为画布对象用窗口组建一样，有这在一个画布内唯一的ID，因此我们可以以此保证tag的绑定不会形成重叠影响。

绑定鼠标事件

这就很简单了。

首先是显示和隐藏的功能：

#infotagname来自于先前绑定的画布tag对象
def showinfo(event):
    self.itemconfig(infotagname,state='normal')
def hideinfo(event):
    self.itemconfig(infotagname,state='hidden')

接着绑定标识符事件，就完工~~领盒饭了~~。

self.tag_bind(back,'<Enter>',showinfo)
self.tag_bind(back,'<Leave>',hideinfo)
self.tag_bind(text,'<Enter>',showinfo)
self.tag_bind(text,'<Leave>',hideinfo)

为了方便他人操作，我们将标识符文字和背景全部绑定事件。

完整代码函数

def add_info(self,pos:tuple,font='微软雅黑 9',fg='#0078d4',bg='white',info_text='',info_font=('微软雅黑','12'),info_width=200,info_fg='black'):#绘制提示框
    def showinfo(event):
        self.itemconfig(infotagname,state='normal')
    def hideinfo(event):
        self.itemconfig(infotagname,state='hidden')
    text=self.create_text(pos,anchor='nw',text='?',font=font,fill=fg)
    bbox=self.bbox(text)
    back=self.create_oval((bbox[0]-2,bbox[1]-2,bbox[2]+2,bbox[3]+2),fill=bg,outline=fg,width=2)
    self.tkraise(text)
    self.tag_bind(back,'<Enter>',showinfo)
    self.tag_bind(back,'<Leave>',hideinfo)
    self.tag_bind(text,'<Enter>',showinfo)
    self.tag_bind(text,'<Leave>',hideinfo)
    info=self.create_text((bbox[2]+10,(bbox[3]+bbox[1])//2),anchor='nw',text=info_text,font=info_font,fill=info_fg,width=info_width)
    ibbox=self.bbox(info)
    info_back=self.create_rectangle((ibbox[0]-2,ibbox[1]-2,ibbox[2]+2,ibbox[3]+2),width=1,fill=bg,outline=fg)
    self.tkraise(info)
    infotagname='info'+str(info)+str(info_back)
    self.addtag_withtag(infotagname,info)
    self.addtag_withtag(infotagname,info_back)
    self.itemconfig(infotagname,state='hidden')

效果

测试代码

def test(event):
    a.title('TinUI Test')
    b.add_paragraph((50,150),'这是TinUI按钮触达的事件函数回显，此外，窗口标题也被改变、首行标题缩进减小')
    b.coords(m,100,5)
def test1(word):
    print(word)
def test2(event):
    ok1()
def test3(event):
    ok2()
def test4(event):
    from time import sleep
    for i in range(1,101):
        sleep(0.02)
        progressgoto(i)
def test5(result):
    b.itemconfig(scale_text,text='当前选值：'+str(result))

if __name__=='__main__':
    a=Tk()
    a.geometry('700x700+5+5')

    b=TinUI(a,bg='white')
    b.pack(fill='both',expand=True)
    m=b.add_title((600,0),'TinUI is a test project for futher tin using')
    m1=b.add_title((0,680),'test TinUI scrolled',size=2,angle=24)
    b.add_paragraph((20,290),'''     TinUI是基于tkinter画布开发的界面UI布局方案，作为tkinter拓展和TinEngine的拓展而存在。目前，TinUI尚处于开发阶段。如果想要使用完整的TinUI，敬请期待。''',
    angle=-18)
    b.add_paragraph((20,100),'下面的段落是测试画布的非平行字体显示效果，也是TinUI的简单介绍')
    b.add_button((250,450),'测试按钮',activefg='white',activebg='red',command=test,anchor='center')
    b.add_checkbutton((80,430),'允许TinUI测试',command=test1)
    b.add_label((10,220),'这是由画布TinUI绘制的Label组件')
    b.add_entry((250,300),350,'这里用来输入')
    b.add_separate((20,200),600)
    b.add_radiobutton((50,480),300,'sky is blue, water is blue, too. So, what is your heart',('red','blue','black'),command=test1)
    b.add_link((400,500),'TinGroup知识库','http://tinhome.baklib-free.com/')
    _,ok1=b.add_waitbar1((500,220),bg='#CCCCCC')
    b.add_button((500,270),'停止等待动画',activefg='cyan',activebg='black',command=test2)
    bu1=b.add_button((700,200),'停止点状滚动条',activefg='white',activebg='black',command=test3)[1]
    bu2=b.add_button((700,250),'nothing button 2')[1]
    bu3=b.add_button((700,300),'nothing button 3')[1]
    b.add_labelframe((bu1,bu2,bu3),'box buttons')
    _,_,ok2=b.add_waitbar2((600,400))
    b.add_combobox((600,550),text='你有多大可能去珠穆朗玛峰',content=('20%','40%','60%','80%','100%','1000%'))
    b.add_button((600,480),text='测试进度条（无事件版本）',command=test4)
    _,_,_,progressgoto=b.add_progressbar((600,510))
    b.add_table((180,630),data=(('a','space fans over the world','c'),('you\ncan','2','3'),('I','II','have a dream, then try your best to get it!')))
    b.add_paragraph((300,810),text='上面是一个表格')
    b.add_onoff((600,100))
    b.add_spinbox((680,100))
    b.add_scalebar((680,50),command=test5)
    scale_text=b.add_label((890,50),text='当前选值：2')
    b.add_info((680,140),info_text='this is info widget in TinUI')

    a.mainloop()