视频讲解
视频讲解:资源包\Video\03\3.4.1 Widget组件的分类.mp4
Widget的意思是组件,组件是tkinter模块的核心,窗口中的按钮、文字等内容都属于组件。tkinter模块和ttk模块中包含了多种组件,本书按照各组件的功能将其分为7类,具体如表3.2所示。
表3.2 Widget组件的分类
续表
视频讲解
视频讲解:资源包\Video\03\3.4.2 Widget组件的公共属性.mp4
虽然tkinter模块中提供了众多组件,且每个组件都有各自的属性,但有些属性是各组件通用的,表3.3中列举了各组件的公共属性及其含义。
表3.3 Widget组件的公共属性及其含义
下面对Widget组件的常用属性用法进行讲解。
☑ foreground(fg)和background(bg)用于设置组件的前景色(文字颜色)和背景色
这两个属性分别用于添加前景色和背景色,其属性值可以是表示颜色的英文单词,也可以是十六进制的颜色值。例如,下面的代码将Label组件的文字颜色设置为红色,背景色设置为蓝色(十六进制值“#C3DEEF”)。
实例位置:资源包\Code\03\04
设置窗口的大小、文字的颜色及背景色。具体代码如下:
设置颜色后的效果如图3.7所示。
图3.7 设置窗口大小和文字的样式
如果将上述代码的第4行修改成以下代码,然后运行本程序,其效果依然不变。
☑ width和height用于设置组件的宽度和高度
tkinter模块中大多数组件都可以通过width和height分别设置宽度和高度,设置大部分组件的大小时,单位为像素,但是也有部分组件单位为文字的行,例如Label组件,下面对其用法进行演示。以实例3.4为例,设置Label组件的宽度为20,高度为3,这里只需要对实例3.4的第4行代码进行修改,修改后的代码如下:
运行效果如图3.8所示。
☑ anchor用于设置文字在组件内的位置
当组件的空间足够时,默认情况下,文字在组件中居中显示。如果我们希望文字显示在别的位置,就需要使用anchor属性,具体的属性值及其设置的文字位置如图3.9所示。
例如将文字设置在组件的左上角,只需对实例3.4的第4行代码进行修改即可,修改后的代码如下:
运行效果如图3.10所示。
图3.8 设置组件的宽度和高度
图3.9 anchor属性值
图3.10 设置文字在组件内的位置
说明
设置组件的anchor属性时,如果属性值为小写,需要加引号,否则可以不用加引号,例如,上面代码中的anchor="nw"也可以更改为anchor=NW。
☑ padx和pady用于设置组件的间距
padx和pady用于设置文字与组件边缘的间距。通常,如果没有为组件设置大小和间距,组件的大小应该适应内容;如果设置了间距,那么无论标签里的内容有多少,里面的内容始终能够与标签边缘保持距离。具体示例如下。
将实例3.4中窗口的宽度与高度去掉(去掉实例3.4中第3行代码),然后设置其水平间距为20像素,垂直间距为10像素,需要将实例3.4中第4行代码修改为以下代码:
运行效果如图3.11所示。
☑ font用于设置文字属性
font可以设置标签中文字相关的属性,具体参数及其含义如表3.4所示。
表3.4 font属性的参数及其含义
说明
表3.4列举的font的参数在使用时并非缺一不可,读者按需要设置即可。例如将文字设置为字体华文新魏、大小为16px、文字加粗的形式,其代码如下:
其效果如图3.12所示。
图3.11 设置组件的间距
图3.12 设置文字属性
☑ relief用于设置组件的边框样式
组件的边框属性主要有6个属性值,各属性值的边框样式如图3.13所示。
☑ cursor用于设置当鼠标指针悬停在组件上时的指针样式
因为各系统的不同,所以同样的参数值,其表现样式可能会略有差异。例如,实现当鼠标指针悬停在Label组件上时,其形状变为蜘蛛样式,具体代码如下:
运行效果如图3.14所示。
图3.13 relief属性各属性值的边框样式
图3.14 鼠标指针悬停在组件上时为蜘蛛样式
实例位置:资源包\Code\08\01
在窗口中显示“充值成功”信息提示,并且将“充值成功”设置为字号18像素、加粗显示的样式,将获得的道具信息设置为红色样式。具体代码如下:
运行效果如图3.15所示。
视频讲解
视频讲解:资源包\Video\03\3.4.3 Widget的公共方法.mp4
同样,Widget组件中也有一些方法是各组件通用的,常用的方法有以下两种。
☑ config():为组件配置参数。
☑ keys():获取组件的所有参数,并返回一个列表。
前面都是在组件中直接设置其属性的,除此之外,也可以通过config()配置参数。例如,下面代码就是通过config()方法设置Label组件的前景色、背景色及字号的。具体代码如下:
运行效果如图3.16所示。
图3.15 充值成功提示
图3.16 config()方法的使用