当前位置:首页 » tkinter » 正文

tkinter的选项卡组件Notebook详细讲解

我今天要讲解的Notebook组件也是一款ttk组件,我们称之选项卡组件。它是一款容器组件,它跟Frame类似,它也可以装入很多组件,这些组件我们可以分类装入不同的选项卡,对于管理是很方便的。

创建Notebook组件语法: Notebook(父组件,参数…..)

    参数:

        height : 组件高度

        width : 组件宽度

        padding : 设置组件四周的额外空间的尺寸

 

装入其它组件到Notebook的方法:add(子对象,参数…..)

    参数:

        text : 选项卡的字符串名称

        state : 选项:normal,  disabled(禁止),  hidden(隐藏)

        image : 选项卡插入图片

        compound :选项卡上同时显示图片和文字时,彼此之间的位置关系

        padding : 各选项卡里,组件跟选项卡里的四周间距

 

我们先来创建一个Notebook组件,然后创建2个框架frame组件fr1,fr2, 再后,通过add方法,把2个框架装入相应的选项卡里,并自动生成选项卡。

以后,想装入更多的组件,只要把装入的组件的父组件设为fr1,fr2y 就行了。

下面用代码来实现:

from tkinter import *
from tkinter.ttk import *
 
root=Tk()
root.geometry('300x150+888+444')
 
note1=Notebook(root) # 1 创建Notebook组件
note1.pack(fill=BOTH,expand=True)
 
fr1=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡1的容器框架
fr2=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡2的容器框架
 
note1.add(fr1,text='选项卡1') # 3 装入框架1到选项卡1
note1.add(fr2,text='选项卡2') # 3 装入框架2到选项卡2
 
but1=Button(fr1,text='按钮1').pack() # 4 把相关的组件装入对应的框架里
la1=Label(fr2,text='标签1',background='blue',foreground='white').grid()
 
root.mainloop()

运行结果:                                             

由上面2图可见:

1. 加到到2个选项卡里的2个框架都自动扩展到全部选项卡的范围;

2. 加入到2个框架的组件,由于父组件的不同,可以分别用pack()grid()来布局定位,互不干扰。

3. 创建其它组件,只要父组件分别为fr1,fr2,就可以装入更多的组件。

 

padding参数:

在上面的代码中,Notebook组件在窗体是居中显示的,fr1,fr22个框架在选项页中也是居中显示的。如果想让它们不居中显示,如何做到呢?对Notebook组件还好办,在pack()方法用padx,pady参数就可以做到。但2个框架在选项页中没有办法用padx,pady2个参数。现在这2种情况都可以用padding这个参数来搞定。

padding=(a,b,c,d)   # padding可提供14个参数来控制组件的左上右下4个边跟外部组件之间的间距。

提供1234个参数不同,表示的意思也不同,具体见下图:

3.PNG

padding=10   # 表示跟4周都保持10个像素的间距

   padding=(10,20)  # 表示左右跟外部组件保持10个像素间距,上下保持20个像素间距

   …… 其他情况,看上图,以此类推.....丶丌皛

下面以代码的情况,来演示一下:

from tkinter import *
from tkinter.ttk import *
 
root=Tk()
root.geometry('300x150+888+444')
 
note1=Notebook(root,padding=(10,10,10,20)) # 1 创建Notebook组件
note1.pack(fill=BOTH,expand=True)
 
fr1=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡1的容器框架
fr2=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡2的容器框架
 
note1.add(fr1,text='选项卡1',padding=10) # 3 装入框架1到选项卡1
note1.add(fr2,text='选项卡2',padding=(20,20,5,5)) # 3 装入框架2到选项卡2
 
but1=Button(fr1,text='按钮1').pack() # 4 把相关的组件装入对应的框架里
la1=Label(fr2,text='标签1',background='blue',foreground='white').grid()
 
root.mainloop()

运行后,Notebook组件,2个框架都按padding的设置到了新的位置


选项框可以文字和图片同时显示,这样好看一点,我来演示一下,其实很简单,就跟标签设置文字和图片同时显示一样,只要在add()方法里加image, compound2个参数。(当然之前要创建好图像对象)

from tkinter import *
from tkinter.ttk import *
 
root=Tk()
root.geometry('300x150+888+444')
 
note1=Notebook(root) # 1 创建Notebook组件
note1.pack(fill=BOTH,expand=True)
 
fr1=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡1的容器框架
fr2=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡2的容器框架
 
img1=PhotoImage(file='16-1.png')
note1.add(fr1,text='选项卡1',image=img1,compound='left') # 3 装入框架1到选项卡1
note1.add(fr2,text='选项卡2') # 3 装入框架2到选项卡2
 
but1=Button(fr1,text='按钮1').pack() # 4 把相关的组件装入对应的框架里
la1=Label(fr2,text='标签1',background='blue',foreground='white').grid()
 
root.mainloop()

运行结果,选项卡1多了一个图片。作者网站 wb98.com

6.PNG

 

默认情况下,选项页都在左上角开始,可是有些情况,我们希望选项页从别的位置开始,这就要样式设置。样式设置有一个参数tabpostition,它的选项跟以前学的anchor有点类似,下面代码来演示一下。

from tkinter import *
from tkinter.ttk import *
 
root=Tk()
root.geometry('300x150+888+444')
 
style1 = Style()
style1.configure('my.TNotebook', tabposition='se') # 'se'再改nw,ne,sw,se,w,e,wn,ws,en,es,n,s试试
 
note1=Notebook(root,style='my.TNotebook') # 1 创建Notebook组件
note1.pack(fill=BOTH,expand=True)
 
fr1=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡1的容器框架
fr2=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡2的容器框架
 
note1.add(fr1,text='选项卡1') # 3 装入框架1到选项卡1
note1.add(fr2,text='选项卡2') # 3 装入框架2到选项卡2
 
but1=Button(fr1,text='按钮1').pack() # 4 把相关的组件装入对应的框架里
la1=Label(fr2,text='标签1',background='blue',foreground='white').grid()
 
root.mainloop()

运行结果

7.PNG 

 

tabpostition=’se’ tabpostition=’wn’ 再运行一下,结果:

8.PNG

 大家自行把tabpostition参数改nw,ne,sw,se,w,e,wn,ws,en,es,n,s试试

 

 Notebook相关方法:

除了上面讲的add()方法,Notebook还有很多方法可用,我讲解几个我掌握的方法。

1. hide(TabID)  # 隐藏某选项卡,如 note1.hide(1)   TabID为选项卡序号

2. forget(child)  # 永久删除选项卡

3. add(child,text) # add(child) 恢复隐藏选项卡,加上新的text值,还可改名

4. select(TabID)  # 选中某选项卡

 

以下用代码来演示一下上面讲的几个方法。 丶丌皛

from tkinter import *
from tkinter.ttk import *
 
root=Tk()
root.geometry('350x150+888+444')
 
note1=Notebook(root,padding=5) # 1 创建Notebook组件
note1.pack(fill=BOTH,expand=True)
 
fr1=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡1的容器框架
fr2=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡2的容器框架
fr3=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡3的容器框架
 
note1.add(fr1,text='选项卡1') # 3 装入框架1到选项卡1
note1.add(fr2,text='选项卡2') # 3 装入框架2到选项卡2
 
but1=Button(fr1,text='按钮1').pack() # 4 把相关的组件装入对应的框架里
la1=Label(fr2,text='标签1',background='blue',foreground='white').grid()
 
fr4=Frame(root,relief='ridge',borderwidth=1) # 准备装入4个按钮
fr4.pack()
 
note1.select(1) # 选中第2个选项卡
# note1.select(fr2) # 也可以用这种方法,选中第2个选项卡
 
Button(fr4,text="隐藏",command=lambda:note1.hide(1)).pack(side=LEFT) # 隐藏选项卡2(id=1)
Button(fr4,text="新增",command=lambda:note1.add(fr3,text='新加项3')).pack(side=LEFT) # 新增选项卡
Button(fr4,text="恢复",command=lambda:note1.add(fr2)).pack(side=LEFT)  # 恢复隐藏的选项卡2
Button(fr4,text="删除",command=lambda:note1.forget(fr3)).pack(side=LEFT)  # 永久删除选项卡3
 
root.mainloop()

运行结果:

 9.PNG

 

再讲几个方法:

1. insert(TabID,child,text)  # 在某个选项卡前插入一个新的选项卡

  insert(1, fr3, text=’新插入的选项卡’)

     insert(’END’, fr3, text=’最后位置插入选项卡’)

 

2. tab(TabID, 参数…)   # tab()方法操作选项卡

  note1.tab(1,text=’改个名’)  # 为第2个选项卡改名

     note1.tab(1,state='disabled')  # 2个选项卡禁止操作

     note1.tab(1,state=’normal’)  # 2个选项卡状态正常

     note1.tab(1,’text’)  # 返回第2个选项卡的文本

     note1.tab(1,’state’)  # 返回第2个选项卡的状态

     note1.tab(1)  # 省略第2个参数,就返回所有参数的的字典

 

3. index(TabID) # 返回选项卡的索引值,如果TabID’end’ 返回选项卡的总数量

  index(fr1)  #  返回值为0

     index(‘current’)  # 返回鼠标点击处的选项卡的索引值(序号)

 

如何即时得到当前选项卡的索引值(序号)? 这可以用到Notebook组件的一个虚拟事件:

<<NotebookTabChanged>>  # 当选项卡发生改变时,此事件发生

 

下面我用代码演示上述方法,并演示 <<NotebookTabChanged>>虚拟事件得到当前的选项卡序号。

from tkinter import *
from tkinter.ttk import *
 
root=Tk() # 源码来自wb98.com
root.geometry('350x150+888+444')
 
note1=Notebook(root,padding=5) # 1 创建Notebook组件
note1.pack(fill=BOTH,expand=True)
 
fr1=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡1的容器框架
fr2=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡2的容器框架
fr3=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡3的容器框架
 
note1.add(fr1,text='选项卡1') # 3 装入框架1到选项卡1
note1.add(fr2,text='选项卡2') # 3 装入框架2到选项卡2
 
but1=Button(fr1,text='按钮1').pack() # 4 把相关的组件装入对应的框架里
la1=Label(fr2,text='标签1',background='blue',foreground='white').grid()
 
note1.select(1) # 选中第2个选项卡
N=note1.index(1) # 得到第2个选项卡的序号
root.title('当前选项卡序号:'+ str(N)) # 用窗体标题来显示当前的选项卡序号
 
fr4=Frame(root,relief='ridge',borderwidth=1) # 准备装入4个按钮
fr4.pack()
 
def newk():
    note1.insert(1,fr3,text='插入的卡') # 插入新选项卡
    note1.select(1) # 选中插入的选项卡
 
Button(fr4,text="插入",command=newk).pack(side=LEFT) # 插入选项卡(id=1)
Button(fr4,text="改名",command=lambda:note1.tab(1,text='改个名称')).pack(side=LEFT) # 第2个选项卡改名
Button(fr4,text="禁止",command=lambda:note1.tab(1,state='disabled')).pack(side=LEFT)  # 第2个选项卡禁止操作
Button(fr4,text="可用",command=lambda:note1.tab(1,state='normal')).pack(side=LEFT)  # 第2个选项卡恢复正常操作
 
def selectjob(event):
    print('-------------')
    root.title('当前选项卡序号:'+ str(note1.index(note1.select()))) # 鼠标点击处的选项卡的序号
    print('当前选项卡文本:',note1.tab(note1.select(),'text')) # 返回选中选项卡的文本
    print('当前选项卡参数字典:',note1.tab(note1.select())) # 返回选中选项卡的参数字典
 
note1.bind('<<NotebookTabChanged>>',selectjob) # 选项卡发生变动时触发此事件
 
root.mainloop()

运行结果

 10.PNG

上面代码,用鼠标点击选项卡,会触发虚拟事件<<NotebookTabChanged>>其实,你用键盘操作ctrl + Tab ctrl + shift + Tab 选择选项卡,也同样解决虚拟事件<<NotebookTabChanged>>

 

在编写一个简单的tkinterttk)程序里,我们编写多窗体时,可以在一个窗体里伪装成多窗体,可以通过FrameLabelFrame组件来装入“不同窗体”的组件,然后通过显示或隐藏FrameLabelFrame来达到切换不同窗体的效果。

我想,我们也可以通过隐藏Notebook组件的选项卡,然后把“不同窗体”的组件装入不同的选项卡里,操作选项卡,以达到多窗体切换的效果。

隐藏选项卡,要样式Style操作,代码:

style1 = Style()

style1.layout('TNotebook.Tab', []) # 隐藏选项卡

 

全部代码测试一下:

from tkinter import *
from tkinter.ttk import *
 
root=Tk()
root.geometry('350x150+888+444')
 
style1 = Style()
style1.layout('TNotebook.Tab', []) # 隐藏选项卡
 
note1=Notebook(root,padding=5) # 1 创建Notebook组件
note1.pack(fill=BOTH,expand=True)
 
fr1=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡1的容器框架
fr2=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡2的容器框架
 
note1.add(fr1,text='选项卡1') # 3 装入框架1到选项卡1
note1.add(fr2,text='选项卡2') # 3 装入框架2到选项卡2
 
but1=Button(fr1,text='按钮1--选项卡1').pack() # 4 把相关的组件装入对应的框架里
la1=Label(fr2,text='标签1--选项卡2',background='blue',foreground='white').grid()
 
note1.select(1) # 选中第2个选项卡
 
fr4=Frame(root,relief='ridge',borderwidth=1) # 准备装入4个按钮
fr4.pack()
 
Button(fr4,text="选项卡1",command=lambda:note1.select(0)).pack(side=LEFT) # 选中第1个选项卡
Button(fr4,text="选项卡2",command=lambda:note1.select(1)).pack(side=LEFT) # 选中第2个选项卡
 
root.mainloop()

运行结果:

 11.PNG


下面讲一下如何更改选项卡上的字体颜色及大小,这也要通过Style样式操作

。
style1 = Style()
style1.configure('TNotebook.Tab',font=('宋体',22,'bold'),foreground='red')
 # 设置选项卡字体,大小,颜色


以下是全部代码

from tkinter import *
from tkinter.ttk import *
 
root=Tk() # 源码来自wb98.com
root.geometry('350x150+888+444')
 
style1 = Style()
style1.configure('TNotebook.Tab',font=('宋体',22,'bold'),foreground='red')
 # 设置选项卡字体,大小,颜色
 
note1=Notebook(root,padding=5) # 1 创建Notebook组件
note1.pack(fill=BOTH,expand=True)
 
fr1=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡1的容器框架
fr2=Frame(root,relief='ridge',borderwidth=1) # 2 创建选项卡2的容器框架
 
note1.add(fr1,text='选项卡1') # 3 装入框架1到选项卡1
note1.add(fr2,text='选项卡2') # 3 装入框架2到选项卡2
 
but1=Button(fr1,text='按钮1--选项卡1').pack() # 4 把相关的组件装入对应的框架里
la1=Label(fr2,text='标签1--选项卡2',background='blue',foreground='white').grid()
 
note1.select(1) # 选中第2个选项卡
 
fr4=Frame(root,relief='ridge',borderwidth=1) # 准备装入4个按钮
fr4.pack()
 
Button(fr4,text="选项卡1",command=lambda:note1.select(0)).pack(side=LEFT) # 选中第1个选项卡
Button(fr4,text="选项卡2",command=lambda:note1.select(1)).pack(side=LEFT) # 选中第2个选项卡个选项卡恢复正常操作
 
root.mainloop()

运行结果

12.PNG

Notebook组件功能还是很强大的,要学的知识很多,我也只是学了一点皮毛,先讲解到这里,以后有机会再就这个组件进行交流。

此文章来自:wb98.com  网站还有相关的系列课程文章,感兴趣的可以前往。

下一篇文章,我来讲解另一个ttk组件:进度条Progressbar


打赏 支付宝打赏 微信打赏

来源:济亨网

本文链接:https://wb98.com/post/339.html

    << 上一篇 下一篇 >>

    湘公网安备 43011102000514号 - 湘ICP备08100508号