在使用 Tkinter 进行 GUI 编程的过程中,如果需要用户自己进行选择时就可以使用列表框控件。列表框中的选项可以是多个条目,也可以是单个唯一条目,但常用于多个条目。...列表框控件(Listbox)常用方法方法说明activate(index)将给定索引号对应的选项激活,即文本下方画一条下划线bbox(index)返回给定索引号对应的选项的边框,返回值是一个以像素为单位的...指定的颜色填充,没有边框3.如果设置了此选项,Listbox 的每一项会相应变大,被选中项为 "raised" 样式selectforeground指定当某个项目被选中的时候文本颜色,默认值由系统指定...selectmode决定选择的模式,tk 提供了四种不同的选择模式,分别是:"single"(单选)、"browse"(也是单选,但拖动鼠标或通过方向键可以直接改变选项)、"multiple"(多选)和...,如下所示:from tkinter import *# 创建主窗口win = Tk()win.title("拜仁慕尼黑")win.geometry('400x180')# 创建滚动条s = Scrollbar
图形化界面的开发(GUI):Tkinter库的使用-1(综述) 图形化界面的开发(GUI):Tkinter库的使用-2(Label+Message+Text) 图形化界面的开发(GUI):Tkinter...常用属性 输入框(Text)控件除了具有共有属性外,也有一些自身的特殊属性,如下: 属性名称 说明...,tk 提供了四种不同的选择模式,分别是:"single"(单选)、"browse"(也是单选,但拖动鼠标或通过方向键可以直接改变选项)、"multiple"(多选)和 "extended"(也是多选,...但需要同时按住 Shift 键或 Ctrl 键或拖拽鼠标实现),默认是 "browse" activate(index) 将给定索引号对应的选项激活,即文本下方画一条下划线...,返回值是一个以像素为单位的 4 元祖表示边框:(xoffset, yoffset, width, height), xoffset 和 yoffset 表示距离左上角的偏移位置
前言 我们知道我们可以使用pillow绘制不同形状的图形,但是我们能不能使用tkinter实现这个功能呢,当然可以,tkinter也可以实现图形的绘制,并且可以将绘制的图形添加到我们的GUI中。...我们可以通过tkinter的画布控件Canvas来实现绘制功能。...Canvas画布控件 Canvas 控件具有两个功能,首先它可以用来绘制各种图形,比如弧形、线条、椭圆形、多边形和矩形等,其次 Canvas 控件还可以用来展示图片(包括位图),我们将这些绘制在画布控件上的图形...Canvas 画布上绘制的图形)被选中时的背景色 selectborderwidth 指定当画布对象被选中时的边框宽度(选中边框) selectforeground 指定当画布对象被选中时的前景色 state...一般情况下,默认主窗口的左上角为坐标原点,这种坐标系被称作为“窗口坐标系”,但也会存在另外一种情况,即画布的大小可能大于主窗口,当发生这种情况的时,可以采用带滚动条的 Canvas 控件,此时会以画布的左上角为坐标原点
图片 同样的,tkinter也有控件来实现类似的功能,tkinter的scale控件就可以实现这样的功能。...该函数有一个唯一的参数,就是最新的滑块位置 3. 如果滑块快速地移动,函数可能无法获得每一个位置,但一定会获得滑块停下时的最终位置 digits 设置最多显示多少位数字 2....默认值是 0 highlightcolor 指定当 Scale 获得焦点的时候高亮边框的颜色 2....默认值是 VERTICAL(垂直放置) repeatdelay 该选项指定鼠标左键点击滚动条凹槽的响应时间 2....默认值是 300(毫秒) repeatinterval 该选项指定鼠标左键紧按滚动条凹槽时的响应间隔 2.
;显示一个数值刻度,为输出限定范围的数字区间 Scrollbar 滚动条控件,当内容超过可视化区域时使用,如列表框。....background(bg) 背景颜色:用来定义控件的背景颜色 bitmap 位图:定义显示在控件中位图文件 borderwidth 边框宽度:定义控件的边框宽度 command 命令:指定特定的函数...relief 边框形式:定义控件的边框形式,比如2D或者3D text 文字:定义控件的标题文字 variable 变量:将控件的数值映射到一个变量上。...消息控件:Message 与Label类似,是用来显示文字的空间,但Message控件用来显示多行不可编辑的文字,且它可以自动编排文字的位置。...滚动条控件:Scrollbar import tkinter as tk from tkinter import Scrollbar from tkinter import Listbox win =
1.4 选择适合的开发环境 虽然可以使用任何文本编辑器编写Tkinter代码,但使用集成开发环境(IDE)可以显著提高开发效率。...以下是几个适合Tkinter开发的IDE: 1.4.1 Visual Studio Code Visual Studio Code(VS Code)是一款轻量级但功能强大的代码编辑器,支持Python和...消息框与标签类似,但更适合显示较长的文本内容。"...width:设置控件的宽度 height:设置控件的高度 padx:设置控件水平方向的内边距 pady:设置控件垂直方向的内边距 bd或borderwidth:设置控件的边框宽度 relief:设置控件的边框样式...第一个完整Tkinter应用 现在,让我们综合前面所学的知识,创建一个完整的Tkinter应用程序。这个应用程序将是一个简单的记事本,具有创建、打开、保存文件以及编辑文本的功能。
默认的文本控件式文本框,就是一行可编辑的文本,没有滚动条,为了创建文本区只要使用style参数调整风格即可。style参数的值实际上是个整数。...但不用直接指定,可以使用按位或运算符OR联合wx模块中具有特殊名字的风格来指定。本例中,我联合了wx.TE_MULTINE来获取多行文本区以及wx.HSCROLL来获取水平滚动条。...而wx.LEFT,wx.RIGHT,wx.TOP,wx.BOTTOM和wx.ALL标记决定边框参数应用于哪个边,边框参数用于设置边缘宽度。...Tkinter是个老牌的Python GUI程序。...from Tkinter import * def hello(): print 'Hello,world' win = Tk() win.title('Hello,Tkinter!')
StringVar()对象 16 width 文本框宽度 17 xscrollcommand 设置水平方向滚动条,一般在用户输入的文本框内容宽度大于文本框显示的宽度时使用。...) 选中指定索引与光标之间的值 12 xview ( index ) 该方法在文本框链接到水平滚动条上很有用。...在图形化界面设计时,由于其具有灵活的界面,因此往往比列表框更受喜爱。...但该控件并不包含在 tkinter 模块中,而是与 TreeView、Progressbar、Separator等控件一同包含在tkinter 的子模块ttk中。...用Toplevel 所创建的子窗体是非模式(Modeless)的窗体,虽然初建时子窗体在最前面,但根窗体上的控件实例也是可以被操作的。
Tkinter具有很多优点:它是跨平台的,因此相同的代码可在窗口,macOS和Linux上运行。视觉元素是使用本机操作系统元素呈现的,因此使用Tkinter构建的应用程序看起来像属于平台自身的。...Label,Button,Entry,和Text小部件只是少数中的Tkinter提供的小部件。还有其他几种,包括复选框小部件,单选按钮,滚动条和进度条。...此时,你可以制作一些普通的窗口来显示消息,但尚未创建功能完善的应用程序。在下一节中,你将学习如何使用Tkinter强大的几何管理器来控制应用程序的布局。...(你可以在for循环外部显式配置每个列和行,但这将需要编写额外的六行代码。) 在循环的每次迭代中,i第列和行被配置为具有weight的1。这样可以确保在调整窗口大小时,每一行和每一列以相同的速率扩展。...现在,你已经有了一个最小但功能齐全的文本编辑器!
在软件设计中,也有一种类似于新房装修的技术可以对已有的功能进行扩展使之更加符合用户需求,从而使得对象具有更加强大的功能,这便是本次即将介绍的装饰模式。...,如窗体、文本框、列表框等等,由于在使用该构件库时,用户经常要求定制一些特殊的显示效果,例如带滚动条的窗体,带黑色边框的文本框,即带滚动条又带黑色边框的列表框等,因此经常需要对该构件库进行扩展以增强其功能...三、重构图形界面构件库 3.1 重构后的设计方案 为了让系统具有更好的灵活性和可扩展性,克服继承复用所带来的问题,M公司开发人员使用装饰模式来重构图形界面库的设计,其中部分类的基本结构如下图所示:...可以看到,第一次装饰之后,窗体有了滚动条。第二次装饰之后,窗体不仅有了滚动条,还增加了黑色边框。...4.2 主要缺点 虽然装饰模式拱了一种比继承更加灵活机动的方案,但同时也意味着比继承更加易于出错,排错也很困难。特别是经过多次装饰的对象,调试时寻找错误可能需要逐级排查,较为繁琐。
//(指定可滚动的位置数量) Numbers Of Steps:滚动条可滚动的位置数目,为0和1时不生效(事实上只有0个可滚动位置或1个可滚动位置那还叫滚动条吗), 例如设为2,则拖动滚动条时滚动条只会处在最小值的位置和最大值的位置...,因为他的可滚动位置只有2个, 例如设为3,则拖动滚动条时滚动条只会处在最小值的位置、最大值的位置以及中间位置,因为他的可滚动位置只有3个。...— 视口 ( 一般是Content 的父物体,带Mask遮罩后的展示区域) Horizontar Scrollbar —— 左右的滚动条( 连接的滚动条必须放在Scroll View下 )...Visibility —— 滚动条可见性 ( Permanent 不变的( 只有选择这个关联的Scrollbar才能隐藏 ) auto hide自动隐藏(如果内容不需要滚动就可以看到隐藏滚动条...) Auto Hide and Expand Viewport 自动隐藏并扩展视图 ( Spacing 滑动区域和滚动条的间距) ) ?
模式目标 扩展系统功能 前言 尽管目前房价依然在涨,但依旧阻止不了大家对新房的渴望和买房的热情。如果大家买的是毛坯房,还要面临一个艰巨的任务,那就是装修。...由于在使用该构件库时,用户经常要求定制一些特殊的显示效果,如带滚动条的窗体、带黑色边框的文本框、既带滚动条又带黑色边框的列表框等,因此经常需要对该构件库进行扩展以增强功能。...比如Window下边的 SrollBarWindow、BlackBorderWindow中对Window中的Display()方法进行扩展,分别实现了带滚动条和带黑色边框的窗体。...在装饰模式中,为了让系统具有更好的灵活性和可扩展性,通常会定义一个抽象装饰类,而将具体的装饰类作为它的子类。...SrollBarDecorator(component); componentSB.Display(); } } 输出结果: 如果希望得到一个既有滚动条又有黑色边框的窗体
block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。...但是请注意,这两种方法会产生不同的结果。 visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。... 这里的文本内容是可以滚动的,滚动条方向是垂直方向。 这里的文本内容是可以滚动的,滚动条方向是垂直方向。 这里的文本内容是可以滚动的,滚动条方向是垂直方向。... 这里的文本内容是可以滚动的,滚动条方向是垂直方向。 这里的文本内容是可以滚动的,滚动条方向是垂直方向。 !...:hover a:hover 把鼠标放在链接上的状态 :focus input:focus 选择元素输入后具有焦点 :first-letter p:first-letter 选择每个 元素的第一个字母
二、CSS选择符 1.CSS选择符就是要控制的对象,要想对某一元素进行控制,有两种方式。 1).使用id选择器,要求id在网页中必须具有唯一性。...2.CSS选择符控制页面所有的html元素(包括哪些本身有默认值的元素),使用通配符"*",但效率较低,不建议使用。 语法:*{属性:值} 3.选择符的嵌套(包含/派生)使用。...功能 语法 设置边框粗细 boder-方向-width:值; 设置边框颜色 border-方向-color:值; 设置边框样式 boder-方向-style:值; 设置某一边框属性的简捷方式 border...-方向:线宽 线型 颜色(线型常用:solid、dashed) 设置某一元素的四条边框的简捷方式[仅限于四条边框属性完全相同] border:线宽 线型 颜色 七、CSS控制背景 1.语法:background...auto(在必须时对象内容才会被裁切或显示滚动条) hidden(不显示超过对象尺寸的内容) scroll(总是显示滚动条) 2.Zoom
在当今数字化时代,客服系统已成为企业与客户沟通的重要桥梁。一个优秀的在线客服系统不仅需要功能完善,还需要在各种设备上都能提供良好的用户体验。...头像使用Element UI的Avatar组件,简介部分在内容为空时自动隐藏。 2. 消息区域 <!...: 自动扩展高度适应多行文本 设置最大高度防止占用过多空间 平滑的高度过渡动画 自动滚动条处理超长内容 性能与用户体验优化 头像处理:实现了getAvatarUrl方法,支持本地和远程头像URL...输入框交互:输入框在获得焦点时有明显的视觉反馈(边框颜色变化和阴影效果),提升用户体验。 禁用状态:发送按钮在没有内容时自动禁用,防止误操作。...总结 这个响应式客服聊天系统前端实现具有以下优势: 真正的跨设备兼容:通过媒体查询和灵活的布局设计,确保在从手机到大屏幕显示器上都能提供良好的用户体验。
-webkit-overflow-scrolling: touch 解释:-webkit-overflow-scrolling属性用于控制元素在移动设备上是否使用滚动回弹效果,其中touch表示使用具有回弹效果的滚动...在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式...-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度 12. em 解释: em为相对长度单位。...自定义滚动条的样式 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条...欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果。
tkinter 根窗体root: 根窗体是图像化应用程序的根控制器,是tkinter的底层控件的实例。...显示一个数值刻度,为输出限定范围的数字区间 Scrollbar 滚动条控件,当内容超过可视化区域时使用,如列表框。....,该控件排除具有共有属性外,还具有显示文本(text)、返回变量(variable)、返回值(value)、响应函数名(command)等重要属性。...该控件除具有共有属性外,还具有显示文本(text)、返回变量(variable)、选中返回值(onvalue)和未选中默认返回值(offvalue)等重要属性。...,虽然也有许多对其中文本进行操作的方法,但通常用的只有取值方法get()和用于删除文本的delete(起始位置,终止位置),例如:清空输入框为delete(0,END)。
但注意有一些css样式是不具有继承性的。... 只是给p标签设置了边框为1像素、红色、实心边框线,而对于子元素span是没用起到作用的。...实线:solid] 一个元素实际宽度(盒子的宽度) = 左边界 + 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框 + 右边界 一个元素实际宽度(盒子的宽度) = margin-left...如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口 相对于浏览器窗口处于右下角。并且拖动滚动条时位置固定变化。...并且拖动滚动条时位置固定不变。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...display:"none"与visibility:hidden的区别: visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。...padding: 用于控制内容与边框之间的距离; Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容,显示文本和图像。...hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。...对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
我们编写的Python代码会调用内置的Tkinter,Tkinter封装了访问Tk的接口; Tk是一个图形库,支持多个操作系统,使用Tcl语言开发; Tk会调用操作系统提供的本地GUI接口,完成最终的...,用来执行一个命令或别的操作,类似标签,但提供额外的功能,例如鼠标掠过、按下、释放以及键盘操作/事件。...Scrollbar 滚动条 对其支持的组件(文本域、画布、列表框、文本框)提供滚动功能 Text 文本域 多行文字区域,可用来收集(或显示)用户输入的文字(类似 HTML 中的 textarea) ScrolledText...可滚动文本域 常用于日志输出显示 Toplevel 顶级 类似框架,但提供一个独立的窗口容器 2.公共属性 属性/参数 描述 master 父窗口指针/上级容器(如:TK类对象) text 组件标题...(部分组件有:Button、Label …) bd 组件边框的大小,默认为 2 个像素 image 组件上要显示的图片 font=(‘行楷’, 15, ‘bold’) 字体,大小,加粗 fg 字体颜色