PYTHON图形操作界面的编程一__窗口、控件及控件的定位
一、目前计算机图形界面的一般特点:
目前计算机图形操作界面的主要特点有以下几点:
1、程序在一个矩形区域中运行,这个矩形区域又称作窗口。窗口可以移动、调整大小、改变位置,关闭了应用程序窗口也就结束了程序的运行。
2、窗口通过各种“窗口元素”又称作控件,向用户展示文字图形等信息或接收用户输入的信息。
3、窗口向用户提供菜单或工具栏等操作命令。
3、通过对话框和用户沟通,通过对话框可以向用户询问问题并获取用户的反馈信息。
4、常用的窗口元素有标签、文本框、单选钮、复选框、数码框、调整滑块、列表框、下拉列表框、命令按钮等……。
请看下图。下面给出了三个对话框,对话框中用到了多种控件。
窗口和对话框的区别是关闭了窗口就结束了程序的运行,关闭对话框后程序仍在运行。对话框是程序在运行期间临时弹出的用来与用户进行交互的矩形区域。
标签:用来在窗口或对话框中显示文字或图形。
单选钮:一组单选钮由多个圆形图标和文字组成,供用户从中作出选择,特点是只能选中一项,不能不选也不能多选。
复选框:一组单选钮由一个或多个方形图标和标识文字组成,供用户从中作出选择,特点是能选中一项或多项,既可不选也可多选。
列表框:以列表的形式列出多个选项,供用户选择。
下拉列表框:是收缩起来的列表框,点击右侧的下箭头可展开隐藏的各列表项,供用户从中选择。
文本框:供用户输入信息。同时对文字具有编辑功能。
数码框:用来设置数值,既可通过点击鼠标改变数值的大小也可直接输入。
调整滑块:通过拖动鼠标可以调数值的大小。
菜单:以文字形式列出的各操作命令
滚动条:当窗口或其他编辑区域无法显示全部内容时出现在窗口右侧或下方,拖动它可以滚动窗口中的内容,以使隐藏的内容显示出来。
二、在PYTHON下创建窗口和控件的一般方法
我们使用PYTHON提供的内部库tkinter可以方便地实现图形化操作界面。可以很容易地创建窗口、对话框和各种控件。
1、创建窗体
用下面的代码就可创建窗体。第一行是导入tkinter库。第二行是创建 窗体。
from tkinter import *#导入tkinter库
w=Tk()
#创建窗体对象
执行完上面两行代码后屏幕上即显示出一个窗口。如下图所示。w是为窗口对象起的名称,当然也可改用其他名称。
Tk是thinter模块中的一个类。代码“w=Tk()”实际是创建了个一个类实例。
有了窗口我们就可以在窗口中创建其他控件,也可用代码来控制窗口的大小、背景颜色、窗口左上角的图标等属性。
2、创建控件的一般方法
tkinter模块提供了创建以下控件的类,我们创建了某个类的实例,实际就创建了该控件。
以下是tkinter.ttk模块下的控件
上面各控件的创建方法是相同的,其格式都是:
控件对象名称=控件类名称(父容器对象名称,属性名=属性值,……)
创建控件的语句中,第一个参数是父容器的名称,一般是窗口的名称。其余参数实际对应一个字典变量,可接收一系列的属性赋值,可以根据需要使用多个属性,下面列出几个常用的属性,更多属性将在后面介绍。
text:控件上显示的文字
width:控件宽度。
height:控件高度
font:控件上文字使用的字体
bg:控件的背景色
fg:控件的文字颜色
【例题1】创建一个显示蓝色文字的标签
用下列代码可创建一个带蓝色文字的标签
L=Label(w,text="这是标签要显示的内容",fg="blue")
因创建的标签要显示在容器中,所以要先将前面的二行创建窗口的代码添加到最前面。完整的代码如下:
上面第三行代码创建了标签类的实例,该标签实例的名称为L,第四行代码用于将L显示在窗口w中。代码执行后显示如下图所示。
【例题2】在上题的基础上增加两个按钮,在前面的代码基础上增加如下代码:
B1=Button(w,text="第一个按钮")
B2=Button(w,text="第二个按钮")
B.pack()
B2.pack()
下面是添加代码后的运行结果。
上面代码中的B1和B2是两个按钮的名称,当然我们也可以使用其他更有意义的名称。
创建了控件后,我们也可用如下的格式随时修改控件的属性。
控件对象变量名["属性名"]=属性值,比如有下面的代码,定义了一个标签,背景颜色没有指定,则使用默认值。
Label(w,text="这是一个标签")
我们也可以用下面的代码随时重新设置标签控件的背景属性,其他控件的其他属性也都可以这样修改。
L["bg"]="green"
也就是说定义控件时如果不指定某个属性,则使用默认值,还可以再用上面介绍方法重新设定属性。
三、控件在窗口(容器)中的定位
tkinter模块提供了三个类用于定位控件在窗口(父容器)中的位置,这三个类都是控件类的祖先类,这三个类各自提供了定位控件的方法,这三个方法分别是pack(),grid()和place()。
1、用pack()方法定位控件
这是一种控件的相对定位方法。默认状态下控件是从上向下排列。如下列代码可创建三个标签,并将三个控件依次从上至下排列在窗口中。
1)pack()方法的side参数
side参数用来指定控件在容器中的排列方式,参数值可以为TOP,BOTTOM,LEFT和RIGHT。
如果所有的控件的pack()方法的side参数都取值为TOP,则表示第一个控件占用容器的第一行,第二个控件占用容器的第二行,依此类推。这是一种默认方式。
如果所有的控件的pack()方法的side参数都取值为BOTTOM则表示第一个控件占用容器的最下面的一行,第二个控件占用容器的倒数第二行,依此类推。
side参数取值为TOP或BOTTOM时均表示每个控件可占用容器的一整行,若只使用side这一个参数,则当控件宽度不足一行时在所在行居中放置。参见下图。左图是代码,右图是窗口(容器)适当放大后的效果。从图中可看出三个标签各占一行,从下向上放置且也同样居中显示,每行左右侧的空白区域是该控件的可扩展区域。控件上方的空白区域则为窗口的多余区域(因控件是从下向上放置的)。
如果所有的控件的pack()的side参数都取值为LEFT则表示第一个控件占用容器的左起第一列,第二个控件占用容器的第二列,依此类推。
如果所有的控件的pack()的side参数都取值为RIGHT,则表示第一个控件占用容器的最后一列(右起第一列),第二个控件占用容器的倒数第二列(右起第二列),依此类推。
side取值为LEFT或RIGHT时均表示每个控件可占用容器的一整列,若只使用side这一个参数,则控件若高度不足一列时在该列的垂直方向居中放置。参见下图。左图是代码,右图是窗口(容器)适当放大后的效果。从图中可看出三个标签各占一列,从右向左放置且在垂直方向居中显示,每列上下方的空白区域是该控件的可扩展区域,右侧空白区域则为窗口的多余区域。
2)pack()方法的fill参数
fill 参数用来在某个方向扩展控件,一般可和side参数配合使用。
当side
取值为LEFT或RIGHT时,fill可取值为Y(取值为X则无效), 表示控件可在垂直方向填充自己的可扩展空间。当side取值为TOP或BOTTOM时fill可取值为X表示控件可在水平方向填充自己的可扩展空间。参见下面例子。左图是代码,右图是运行后且适当扩大容器(窗口)后的效果。(其中第二个标签没使用fill参数,所以没有在水平方向扩展)
上面代码中由于第一个标签和第三个标签均使用了fill参数,故这两个标签都占满一整行。
下图是控件在纵向填充整列的例子。
如将代码改为如下,则显示结果为第一个标签在左侧,第二第三个标签在右侧从上到下排列。
L1.pack(side=LEFT)
L2.pack(side=TOP)
L3.pack(side=TOP)
3)pack()方法的expand参数
expand参数可以取两个值1或0,当expand=0时表示控件不能向窗口的多余空间扩展,如果取expand=1则控件可以向窗口的多余空间扩展。请看下例。
上面第一段代码是各控件的expand=0的状态,因为这是一种默认状态,所以代码中省略了这个参数。三个按钮在垂直方向均不可扩展,放大窗口后纵向多出的空间只能放置新的控件,原控件不可占用。注意参数expand只决定控件是否可向窗口的多余空间扩展,而不是向控件自己的可扩展空间扩展。
上面第二段代码的第一个控件的expand=1,所以放大窗口后增加的空间成了第一个控件的可扩展空间(灰色区域),窗口不论调整为多大,增加的空间都属于第一个控件。
4)pack()方法的padx和pady参数
使用pack()方法时我们还可以使用padx和pady参数来指定控件边界与父容器或另一相邻控件边界的距离(也就是控件四周是否留出空白区域)。其取值是一个整值,单位为像素。
padx用来指定控件左边界、右边界与其相邻控件的距离,如下面的代码显示结果如下:
上面第一个标签左右各空出20个像素,这是因为padx=20,决定了该控件左右边界与其他控件之间的距离。
pady用来指定控件上下边界与容器或其他控件的距离,如将最后三行代码修改如下,则显示结果如下图所示:
L1.pack()
L2.pack(pady=20)
L3.pack()
第二个控件垂直方向均与其相邻控件留出了20像素的空白距离。
3)pack()方法的的ipadx和ipady参数
ipadx参数用来设置控件上的文字左右边缘和控件的左右边界的距离。参数值为一个数值,单位为像素。
ipady用来设置控件上的文字上下边缘与本控件上下边缘间的距离。单位为像素,比如下面的代码,执行后显示结果如下右图所示。
其中第二个标签的文字在纵向与控件上下边缘各相距20个像素。下面左面的代码执行后结果如下面右图所示,因为第二个控件设置了ipadx=40,所以第二个控件文字的左右边缘均距离控件左右边缘各有40个像素的距离。
4)anchor参数
该参数在参数expand为1时才可看到效果,这是因为expand=1时可使容器中多余的空间成为本控件的可扩展空间,本参数正是使控件在自己的可按钮空间中按地理方位进行定位,有九个选项可用,分别是E、S、W、N,NW,NE,SW,SE和CENTER分别对应东、南、西、北,西北、东北、西南、东南和中间。注意在地理上规定是上北下南左西右东。
但要注意只有expand设置为1时容器的多余空间才能转化为控件的可扩展空间。当多个控件均将expand值设置为1时则容器放大后的多余空间将平均分配给各控件。下面的例子中四个控件的expand参数均设置为1,故窗口放大后多出的空间被分配给四个控件,每个控件都在自己的空间中按地理方位重新进行了定位。
图中的黑色框线是为了便于理解而添加的。从图不难看出各控件均在各自的可扩展区域内按指定的地理位置时行了定位。实际显示时没有黑色线条。
再看一个例子,下例中将四个控件的顺序做了改变,最三个控件在最上面,第一个控件在最下面,右图中的黑色框是后添加的。分别对应四个控件各自的可扩展区域。各控件只能在各自的区域中按地理方位进行了定位。
如果expand=0则各控件的可扩展区域就缩小到各控件所在的行或列(视side的取值而定)。
2、用grid()方法定位控件
grid()方法以表格的行列方式对控件进行定位,控件所在的行列位置由row和column两个参数决定,前者代码行数,后者代表列数。请看下面例子。右图中的三个控件分别被定位在第0行0列,第1行第1列,第2行第2列。
用参数columnspan可以实现控件跨列显示,请看下面例子:
同理我们也可用rowspan参数使控件跨行显示。
grid()定位方法还提供了sticky参数,当各控件大小不同时可以使用参数sticky来指定各控件的对齐方式。参数sticky共有四个参数N、S、W、E,分别为上对齐,下对齐,左对齐,右对齐。请看下面的例子。
第一段代码没有使用sticky参数,各控件默认是居中对齐,第二段代码设置参数sticky=N,各控件都在顶端实现对齐。
grid()方法也可使用padx和pady参数来设置控件四个边缘和相邻控件的空白距离。
3、用place()方法定位控件
这个方法通过参数x,y来定位控件左上角在容器中和坐标,因此是一种控件的绝对定位方式。请看下面例子。
上面代码中的x和y值均代表容器(窗口)内的绝对坐标位置,单位是像素。窗口的左上角坐标为0,0,水平坐标向右方向增加,垂直坐标向下方增加。使用上面的定位方法窗口的大小不论如何改变控件的位置都保持不变。
place方法也可通过参数relx和rely来实现控件在容器中的相对定位。
这两个参数的取值范围为0-1,代表控件左上角出现在容器中的相对位置,比如x=0.5,则表示控件的左上角位置会出现在容器总宽度的二分之一处。请看下面的例子。
这种定位方法,当窗口大小改变时控件在窗口中的相对位置是不变的,因此窗口变大,控件也随之变大,以保持其相对窗口的位置不发生改变。