精华内容
下载资源
问答
  • RFID学习笔记

    千次阅读 多人点赞 2017-06-06 13:18:46
     射频识别技术RFID(Radio Frequency Identification),又称为电子标签、无线射频识别,是种非接触式的自动识别技术,通过无线电讯号识别特定目标并读写相关数据而无需识别系统与特定目标之间建立机械或光学...

    技术简介:

        射频识别技术RFID(Radio Frequency Identification),又称为电子标签、无线射频识别,是一种非接触式的自动识别技术,通过无线电讯号识别特定目标并读写相关数据而无需识别系统与特定目标之间建立机械或光学接触。可用于识别高速运动物体并可同时识别多个标签,过程中无需人工干预,操作快捷方便。可工作于各种环境,实现对各类物体或设备(人员、物品)在不同状态(移动、静止或恶劣环境)下的自动识别和管理。

        RFID系统主要由应答器、阅读器和高层应用组成,其中的应答器包括集成电路芯片。阅读器用于产生射频载波与应答器进行信息交互。高层应用包括信息的管理和决策。

        应答器的基本包括天线、编/解码器、电源、解调器、存储器,控制器以及负载电路组成。从应答器传送信息时,状态数据从存储器中取出经过编码器和负载调制单元发送。

        应答器可以分为只读应答器、读/写应答器和具有识别功能的应答器。应答器天线部分主要用于数据通信和获取射频能量,给应答器的其他电路提供能量。根据应答器能源获取方式不同可以分为:无源(被动式)应答器、半无源(半被动式)应答器和有源(主动式)应答器。

        有源应答器,这种应答器工作所需的能量完全来自于自身的电源模块,它会主动地与阅读器信息传输。由于主动通信过程需要比较大的能量供应,所以有源应答器的体积往往比较大,重量较重。

        控制器是应答器系统的核心部分,对于可读可写应答器,需要内部逻辑控制对读写的使能和对读写操作的支持,对于有密码的应答器,要求控制器能进行数字验证操作。RFID的应答器的存储容量一般在几字节到几千字节之间,存储器存储的数据量一般为产品的序列号,如EPC编码。

        RFID阅读器(读写器)通过天线实现对应答器识别码和内存数据的读出或写入操作。典型的阅读器包含有高频模块(发送器和接收器)、控制单元、振荡电路以及阅读器天线几部分。在实际应用中,有4种波段的频率,有低频(125k~ 134.2K)、高频(13.56Mhz)、超高频(860-960MHz)和微波(2.45GHz)。RFID阅读器是以一定的频率、特定的通信协议完成对应答器中信息的读取。

        近场通信(NFC)技术是RFID的专用子集。

        阅读器和应答器之间执行短距离无线通信的RFID系统通常利用电磁耦合、电磁感应、无线电波等形式,应用较为典型的是电感耦合,阅读器和应答器天线部分的电感线圈通过电磁场进行信息传输。RFID射频前端是实现数据和能量的交换传输的关键部分,RFID技术通过电感耦合方式进行通信,电感耦合方式的理论基础是LC谐振回路和电感线圈产生的交变磁场,也是RFID天线的基本原型。

        电感耦合分为两种方式:一种是串联谐振回路的耦合,另一种是并联谐振回路的耦合。可把两个或更多个串、并联谐振回路连接起来,构成带通滤波器。谐振放大器中,LC并联谐振回路使用最为广泛。

    行业相关:

    RFID芯片主要供应商:恩智浦半导体(NXP)、德州仪器(TI)和EMMicroelectronic。

    MIFARE是恩智浦一系列免接触式IC产品中的著名品牌,具有典型的高达10厘米(4英寸)读/写距离,在全球有40多种不同应用。MIFARE产品完全符合ISO/IEC 14443标准,已售出2亿6千万个读卡器和100亿个卡组件,经验证比市场上任何其他接口技术都更加成熟可靠。

    系列特色:

    完全符合ISO/IEC 14443国际标准;

    最高可满足NFC Forum 4类标签标准;

    支持4字节和7字节UID和随机ID;

    不同级别的加密、身份验证和通信速度可供选择;

    最高可满足EAL5+通用标准;

    提供来源和近场校验;

    标准接口确保目前的基础设施可轻松升级以符合未来智能卡芯片要求,为价值链的各个层次提供一致的产品与多重资源选择;

    操作简单、快捷,完成一次读写操作仅需0.1秒;

    抗干扰能力强,有快速防冲突机制,在多卡同时进入读写范围内时,能有效防止卡片之间出现数据干扰,读写设备可一一对卡进行处理,提高了应用的并行性及系统工作的速度。

        MIFARE 卡的存贮结构及特点(大容量--16分区、1024字节),能应用于不同的场合或系统。(Mifare技术已经被破解,卡片可以被复制,由于价格低廉,所以还在广泛使用)

        RC530是NXP 公司出品的应用与13.56MHz非接触式通信中高集成读卡IC系列中的一员,该芯片完全集成了在 13.56MHz下所有类型的被动非接触式通信方式和协议。

        MFRC530支持ISO14443A所有的层。RC530的外围电路入图所示。该电路由接收电路和单片机接口电路两部分组成。由于RC530内部接收部分使用一个受益于副载波双边带的概念装入卡响应的调整。推荐使用内部产生的VMID电势作为RX脚的输入电势。为了提供一个稳定的参考电压,必须在VIMD脚接一个对地的电容C9,RX和VMID必须连接一个分压IC卡将回复自己UID,如果没有碰撞阅读器将收到完整的电路由R9,R10构成,而且天线与分压器间还需要用一个电容C10串接。由于IC卡工作在13.56Mhz下。石英晶体在产生用于驱动RC530和天线的13.56Mhz时钟时,还会产生更高频率的谐波。因此必须加上由L1,L2,C11,C13组成的低通滤波电路。

        MFRC522是NXP 公司针对三表最新推出的一款非接触式低功耗读写基站芯片,它是应用于13.56MHz非接触式通信中高集成读卡IC系列中的一员。该读卡IC系列利用了先进的调制和解调概念,完全集成了13.56MHz下所有类型的被动非接触式通信方式和协议。 MF RC522支持ISO14443A所有的层,传输速度最高达424kbps,具有三种主机接口方式:SPI模式、 UART模式、 I2C模式。MFRC523是一个高度集成的低功耗非接触读写芯片,集成了13.56MHz下的各种主动/被动式非接触通信方法和协议。

    通讯主要分为4步:

    第一步、寻卡,写通讯命令26H 或52H到FIFODATA,写命令1EH到COMMAND,成功后得到卡类型。

    第二步、选择,写通讯命令93H到FIFODATA,写命令1EH到COMMAND,成功后得到卡号。 

    第三步、认证,通过LOADKEY写KEY到KEY缓存,写参数命令60H(认证A密码)或61H(认证B密码)+块地址+卡号到FIFODATA,写命令0CH到COMMAND,成功后再写命令14H到COMMAND,此操作卡不返回数据,通过读取标记判断是否成功。

    第四步、直接对卡进行读写增减值操作,也就是通过在FIFODATA上写入命令参数及数据,通过写命令1EH到COMMAND实现。

    智能标签IC:

        EPCglobal标准的UCODE无源UHF转发器IC非常适合需要高速操作的供应链和物流应用,具有高度防冲突、面向远距离读取的高敏感度以及适合全球应用的更宽的频率范围。UCODE IC系列提供不同的存储容量和其他特殊功能,用户可以面向特定应用选择性价比最高的容量和功能。

        UHF EPCglobal第2代标准可将UHF RFID技术的大规模部署投入商用,并用于无源智能挂牌和标签。主要的应用领域包括全球供应链管理和物流,尤其考虑到欧洲、美国和中国的频率标准,确保可实现数米远的工作距离。

        G2X是专为无源智能挂牌与标签而设计的芯片,支持EPCglobal第1类第2代UHF RFID标准。它尤为适合需要在数米远进行操作以及高防干扰速率的应用。

        G2X属于恩智浦UCODE产品系列下的一款产品。所有UCODE产品系列均提供防干扰和干扰仲裁功能。这可让读卡器在其天线范围内同步操作多个标签/挂牌。UCODE G2X标签/挂牌无需外部电源。(芯片如:SL3ICS1002)。

        HITAG®是低频(LF) RFID,低频技术是严苛环境应用的首选技术,它可提供所需的高可靠性、稳定性和安全数据传输。

        NTAG®产品为NFC解决方案,包括广泛的供电选择:无源供电,半无源供电和互联IC供电等,在接近操作范围及每个安全级别和互动性方面具有卓越的性能。所以,无论是现在还是将来,客户都能找到适合他们应用的最佳解决方案。NTAG IC完全符合NFC Forum和ISO/IEC标准,可实现与NFC基础设施的最大互操作性。


    搜索到的国内RFID相关企业:

    1、深圳远望谷 

    2、上海复旦微电子 

    3、深圳先施科技 

    4、北京航天金卡 

    5、北京同方智能卡 

    6、上海贝岭 

    7、北京亚仕同方 

    8、江苏瑞福智能 

    9、上海坤锐电子 

    10、凯泰科技

        对于 LF 和 HF 频段,系统工作在天线的近场,标签所需的能量通过电感耦合方式由读写器的耦合线圈辐射场获得,工作方式为电感耦合。型号为HRRFD-NF09的近场天线。

        对于超高频和微波频段,读写器天线为标签提供能量或唤醒有源标签,工作距离较远,一般位于读写器天线的远场。如图是型号为CS—771的圆极化天线。

    应用相关:

        网上有开发人员实验验证,可支持手动认证操作的数据收发,认证操作就是一系列的数据收发,普通数据能收发,认证数据也可以。

        支持手动实现校验位操作,MifareClassic系列(就是使用Crypto-1密码系统)在认证中必须需要读卡器支持校验位控制。因为在MifareClassic系列的认证过程中,第二步和第三步读卡器、卡片之间传送的数据是加密的,但是校验位是对应明文的校验。如果处于自动校验状态,那么校验位肯定就是所收发的数据(密文)的校验而不是明文的校验。所以不支持控制校验就不支持手动认证。


    主要性能参数:

    技术难点:

        RFID 应答器天线作为RFID系统的重要组成部分,它的性能将极大的影响整个RFID系统的效率与质量。影响RFID 天线性能的主要因素包括天线的尺寸、工作频段、阻抗及增益等。

        一般常用的RFID天线常采用弯折线型偶极子形式,便于缩减天线尺寸及天线加工。该类型天线方向图为垂直于天线面,因此使用时贴附于目标物体垂直外表面;当物体的长度随之变化时,要求天线也随之变化,其增益也随之改变,因此需要设计出一款能够根据长度而改变的天线,另外,其各项天线性能也需要满足要求。在RFID系统中,天线分为电子标签天线和读写器天线两大类,分别承担接收能量和发射能量的作用。

        发射天线的基本功能之一是把从馈线取得的能量向周围空间辐射出去,基本功能之二是把大部分能量朝所需的方向辐射。

        RFID 系统中的术语“零讯号(null)”指的是尽管接收通信所需的电力的距离足够 ( 即,在可通信范围内 ) 仍不能执行通信的现象,并且存在可能导致这种零讯号发生的各种因素。反相就是一种这样的因素。由反相导致的零讯号将被称作反相零讯号。

        超高频 RFID 技术对一次性写入的数据量是有限制的,因此对于大数据的写入需要实现续写功能,也就是说每次数据写入都要从上一次写入数据的结束位置开始写本次需要存储的数据信息。数据安全是数据管理的重要组成部分,因此对业务数据的保护也是超高频 RFID 电子标签应用的重要部分。

        在射频读写器的应用中遇到的一个问题就是阅读器冲突,这是一个阅读器接收到的信息和另外一个阅读器接收到的信息发生冲突,产生重叠。解决这个问题的一种方法是使用TDMA技术,保证阅读器不会互相干扰。

     

    专利相关:

        截止日前的相关已授权发明专利5952项,TOP5:NXP(95),国家电网(85),中兴(80),艾利丹尼森公司(76),富士通(70)。

    思维发散——场检测和场激发:

    金属探测仪:通常由两部分组成,即检测线圈与自动剔除装置,其中检测线圈为核心部分。线圈通电后会产生磁场,有金属进入磁场,就是引起磁场变化,由此判断有金属杂质。某些产品本身含水、盐等到点成分,也会对磁场产生类似金属的干扰。这种现象,称为产品效应。可以通过产品效应补偿功能解决此类问题。

        探测器产生周期性变化的磁场,周期性变化的磁场在空间产生涡旋电场。而涡旋电场如果遇到金属的话,会形成涡电流,可以被检测到。涡电流产生后反作用于磁场使线圈的电压和阻抗发生变化。

        发射线圈的电流会产生一个电磁场,就如同电动机也会产生电磁场一样。磁场的极性垂直于线圈所在平面。每当电流改变方向,磁场的极性都会随之改变。这意味着,如果线圈平行于地面,那么磁场的方向会不断地交替变化,一会儿垂直于地面向下,一会儿又垂直于地面向上。 

        随着磁场方向在地下反复变化,它会与所遇的任何导体目标物发生作用,导致目标物自身也会产生微弱的磁场。目标物磁场的极性同发射线圈磁场的极性恰好相反。如果发射线圈产生的磁场方向垂直地面向下,则目标物磁场就垂直于地面向上。             

        接收线圈能完全屏蔽发射线圈产生的磁场。但它不会屏蔽从地下目标物传来的磁场。这样一来,当接收线圈位于正在发射磁场的目标物上方时,线圈上就会产生一个微弱的电流。

        这一电流振荡的频率与目标物磁场的频率相同。接收线圈会放大这一频率并将其传送到金属探测器的控制台,控制台上的元件继而对这一信号加以分析。

        X光的光子与普通可见光的光子基本相同,但是它们携带的能量更多。这种较高的能量水平可以使X光直接穿过人体大多数的软组织。常规的X光成像技术利用的是光影原理。从人体一侧照射“光线”,此时,人体另一侧的胶片可记录骨骼的轮廓。

    展开全文
  • 屏幕尺寸:指屏幕的对角线长度,单位是英寸,1英寸等于2.54厘米,常见尺寸有2.4,2.8,3.5,3.7,4.2,5.0,5.5,6.0等。 屏幕分辨率:指在纵横向上的像素点数,单位是px,1px为个像素点,一般格式为纵向像素*...

    屏幕尺寸:指屏幕的对角线长度,单位是英寸,1英寸等于2.54厘米,常见尺寸有2.4,2.8,3.5,3.7,4.2,5.0,5.5,6.0等。

    屏幕分辨率:指在纵横向上的像素点数,单位是px,1px为一个像素点,一般格式为纵向像素*横向像素,如1960*1080。

    屏幕像素密度:相同尺寸情况下,分辨率越高,屏幕越清晰,即屏幕像素密度越大。屏幕像素密度指每英寸上面的像素点个数,单位是dpi,是“dot per inch”的缩写,计算方式如下图:

    密度无关像素:单位dip或dp,是Density Independent Pixels的缩写,Android规定,在屏幕像素密度为160dpi的情况下,1dp=1px。而在像素密度为320dpi的情况下,1dp=2px,以此类推。计算公式:1dp=(像素密度/160dpi)*1px。

    sp:全称cale-independent pixels,与dp类似,用于设置字体大小。

    设置布局时,使用dp和sp(字体),不要直接使用px,这样才能保证屏幕适配。

    dpi的范围划分

    (表中像素密度范围后包前不包,如120~160为120<x<=160):及dp/sp/px换算比率(rate=像素密度/160dpi,dp=px/rate)

    名称ldpimdpihdpixhdpixxhdpixxxhdpi
    像素密度0~120dpi120dpi~160dpi160dpi~240dpi240dpi~320dpi320dpi~480dpi480dpi~640dpi

    比率rate

    0.750.75~11~1.51.5~22~33~4
    代表性分辨率240*320320*480480*800720*12801080*1920 

     

     

     

     

    通常我们都会用上面的代表性分辨率来计算rate,而从来没指定说是屏幕是几英寸的.比如很多文章里讲320*480的屏幕是160dpi,很容易就让人误解所有480*320的屏幕的像素密度都是160dpi,其实很不严谨,他们之间还有一个变量:屏幕尺寸,下面我们就来来计算一下这些经常拿来举例子的屏幕分辨率的屏幕是几英寸的情况下才是对应160dpi、320dpi等等。

    屏幕尺寸=√(屏幕宽px)²+屏幕高px²/dpi,带入值计算得出:

    480*320分辨率的屏幕,160dpi时的屏幕尺寸为√320²+480²/160=3.6英寸;

    720*1280分辨率的屏幕,320dpi时的屏幕尺寸为4.589英寸≈4.6寸也就是市场上常用的4.5寸;

    1080*1920分辨率的屏幕,480dpi时的屏幕尺寸为4.589英寸≈4.6寸也就是市场上常用的4.5寸;

    使用场景

    正是因为dpi值其代表的特性,所以android项目的资源文件下存在以下目录:

    drawable-ldpi    ( 当dpi为120时,使用此目录下的资源)
    drawable-mdpi    ( 当dpi为160时,使用此目录下的资源)
    drawable-hdpi    ( 当dpi为240时,使用此目录下的资源) 
    drawable-xhdpi   ( 当dpi为320时,使用此目录下的资源)
    drawable-xxhdpi  ( 当dpi为480时,使用此目录下的资源)
    Android正是根据设备DPI值得不同,选择清晰度不同的资源使用,完成屏幕的适配。

    Android的图标尺寸 

    像素密度启动图标欢迎页背景图操作栏图标上下文图标系统通知图标(白色)最细笔画

    mdpi

    48×48 px320*48032×32 px16×16 px24×24 px不小于2 px

    hdpi

    72×72 px480*80048×48 px24×24 px36×36 px不小于3 px

    xhdpi

    96×96 dp720*128072×72 dp32×32 dp48×48dp不小于4 dp

    xxhdpi

    144×144 px1080*192096×96 px48×48 px72×72 px不小于6 px

    UI设计举例

    比如UI设计师给的图是以750px的屏幕宽度作为标准的,例如一张图片的尺寸是100px*100px,或者字体大小为100px,则换算成android的dp和sp为(以xxhdpi屏为常用适配机型 rate = 320/160~480/160=2~3):(1080/750)*100/rate=144/2~144/3=48dp~72dp

    展开全文
  • 移动web开发笔记

    万次阅读 2016-05-15 20:12:27
    还可以接受每厘米像素点数的度量值,如min-resolution: 118dpcm。 - scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描)。如720p HD电视(>devide-width指屏幕宽高,width指渲染窗口...

    移动web开发笔记

    参考:
    移动web开发入门
    移动端web开发技巧

    基础概念

    像素单位

    CSS pixels与device pixels CSS pixels

    浏览器使用的抽象单位, 主要用来在网页上绘制内容。 device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度。 等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性。经过分析和总结,我们可以得出这么一条公式:
    1 CSS pixels = (devicePixelRatio)^2 device pixels
    (^2是平方的意思,至于 devicePixelRatio是什么东西,后面会讲解) 。

    PPI/DPI

    PPI,有时也叫DPI,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像。(注:这里的像素,指的是device pixels。)搞清楚了PPI是什么意思,我们就能很容易理解PPI的计算方式了,我们需要首先算出手机屏幕的对角线等效像素,然后处以对角线(我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度),就可以得到PPI了。准确的计算公示大家可以参照下图。比较有意思的是,根据公式计算出来的iPhone 4的PPI为330,要比苹果官方公布的326要高一点点。

    devicePiexelRatio

    pixel - px ( picture element )
    
    dpi / ppi - 每英寸像素 ( dot per inch )
    
    dips - 设备独立像素 ( device-independent pixels )
    
    devicePixelRatio - 物理像素 / dips 
    

    文字大小控制

    px, rem
    
    固定大小 - px
    
    多屏适配,统一修改 - rem
    相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
    
    rem - font size of the root element (W3C)
    

    viewport

    参考:移动前端开发之viewport的深入理解

    <meta name="viewport"
          content="width=device-width,
                   height=device-height,
                   inital-scale=1.0,
                   maximum-scale=1.0,
                   user-scalable=no;"
    />

    在苹果的规范中,meta viewport 有6个属性,分别如下:
    - width - viewport的宽度[pixel_value |device-width]
    - height - viewport的高度[pixel_value |device-height]
    - initial-scale - 初始的缩放比例[float_value]christer1229
    - maximum-scale - 允许用户缩放到的最大比例
    - minimum-scalbujue - 允许用户的最小缩放值
    - user-scalable - 用户是否可以手动缩放 [yes | no]

    响应式布局

    原则

    • 移动优先
    • 渐进增强

    实现方式

    • 媒体查询
    • 使用JS
    • 使用第三方框架

    布局方案

    百分比布局(流体布局)

    将元素原本的定宽除父容器的宽度得到百分比设置为宽度,使用百分比,文字使用 em。

    • 优点:
      流动布局页面对用户更友好,因为它能自适应用户的设置。
      页面周围的空白区域在所有分辨率和浏览器下都是相同的,在视觉上更美观。
      如果设计良好,流动布局可以避免在小分辨率下出现水平滚动条。
    • 缺点:
      设计者更难控制用户所见,并可能忽略掉一些错误,因为在特定的分辨率下看起来好的;
      图片,视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户;
      在特别大的分辨率下,内容会被拉成长长的一行,变得难以阅读;
      会有画面失真问题

    弹性(flexible)布局

    用rem替代px
    原理:定一个最大宽度,设备屏幕超过这个宽度之后,rem大小不再变化,否则,rem大小设置为屏幕宽度的几分之一,页面中的长度单位值用rem代替px,这样随着页面的宽度变化能够进行等比例缩放。
    rem实际是页面根元素的字体大小,通过js改变rem值的代码如下:

    ;
    ( function( win ) ) {
        var doc = win.document;
        var docEl = doc.documentElement;//获取文档元素
        var tid;
    
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;//获取设备宽度
            if ( width > 540 ) {
                width = 540;
            }
            var rem = width / 10;//设置rem为屏幕宽度的十分之一
            docEl.style.fontSize = rem + 'px';
        }
        win.addEventListener('resize', function() {//屏幕宽度改变时
            clearTimeout(tid);//清除之前的计时器
            tid = setTimeout(refreshRem, 300);//300ms后改变rem大小
        }, false);
    
        win.addEventLister('pageshow', function( e ) {//页面显示时
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
        refreshRem();
    })( window );

    参考:移动端页面使用rem来做适配

    flex-box布局

    flex-box,参考:
    Flex 布局教程:语法篇
    优点:布局方便,灵活性高;
    缺点:兼容性问题;

    图片处理

    普通设置:

    img {
        max-width: 100%;
    }

    或:

    img {
        width: 100%;
        max-width: 300px;
    }//限制最宽不超过300px;

    响应式图片:

    参考:
    响应式图片srcset全新释义sizes属性w描述符
    Srcset和sizes

    即根据屏幕密度现实对应尺寸图片
    src:指定资源(在浏览器不认识srcset和size时会加载这个)
    srcset:srcset的值是可用图像版本的URL列表;每个图片的宽度都用w描述符来表明。
    sizes:使用长度与媒体查询配合,浏览器会检测每一个媒体查询,直到匹配到为止。使用查询配合的长度作为“选择资源”拼图的最后一块:图像渲染宽度或者相对于视图。
    eg.

    <img src="small.jpg"
     srcset="large.jpg 1024w,
             medium.jpg 640w,
             small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw,
            100vw"
     alt="A rad wolf" />

    媒体查询

    1. 可以通过<link>标签的media属性为样式表指定设备类型
    <link rel="stylesheet" type="text/css" media="screen" href="screen-style.css">
    <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css"> //纵向屏幕
    <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css"> //宽度小于900px时
    1. 在css中同样可以使用
    @media screen and (max-width: 960px){
        body{
            background: #000;
        }
    }
    @media (max-width: 960px){
        body{
            background: #000;
        }
    }
    @media screen and (min-width:960px) and (max-width:1200px){
        body{
            background:yellow;
        }
    }
    1. @import方法
      @import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。
    @importurl(reset.css) screen;   
    @importurl(print.css) print;

    <head>中的<style>标签中引入媒体类型方法。

    <head>
    <style type="text/css">
        @importurl(style.css) all;
    </style>
    </head>

    为方便查阅,下面列出了所有可供媒体查询检测的特性
    - width:视口宽度。
    - height:视口高度。
    - device-width:渲染表面的宽度(对我们来说,就是设备屏幕的宽度)。
    - device-height:渲染表面的高度(对我们来说,就是设备屏幕的高度)。
    - orientation:检查设备处于横向还是纵向。
    - aspect-ratio:基于视口宽度和高度的宽高比。一个16∶9比例的显示屏可以这样定义aspect-ratio: 16/9。
    - device-aspect-ratio:和aspect-ratio类似,基于设备渲染平面宽度和高度的宽高比。
    - color:每种颜色的位数。例如min-color: 16会检测设备是否拥有16位颜色。
    - color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
    - monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数,如monochrome: 2。
    - resolution:用来检测屏幕或打印机的分辨率,如min-re一种检测 IE 是否加载完成的方式,使用 doScroll 方法调用,详情可见http://javascript.nwbox.com/IEContentLoaded/
    原理就是对于 IE 在非 iframe 内时,只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。在上述中间隔 50 毫秒尝试去执行 doScroll,注意,由于页面没有加载完成的时候,调用 doScroll 会导致异常,所以使用了 try -catch 来捕获异常。
    结论:所以总的来说当页面 DOM 未加载完成时,调用 doScroll 方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了。solution: 300dpi。还可以接受每厘米像素点数的度量值,如min-resolution: 118dpcm。
    - scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描)。如720p HD电视(>devide-width指屏幕宽高,width指渲染窗口宽高
    720p的p即表明是逐行扫描)匹配scan: progressive,而1080i HD 电视(1080i中的i表明是隔行扫描)匹配scan: interlace。
    - grid:用来检测输出设备是网格设备还是位图设备。
    - 在上述所有特性中,除scan和grid之外,都可使用min和max前缀来创建一个查询范围。

    HTML5

    新表单类型

    • placeholder
      只需在input元素中加入placeholder属性,其属性值就会默认显示为占位符文字,输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入值时,占位符文字则会再次显示。
    • required
      在支持HTML5的浏览器中,在input元素中追加布尔类型的属性required(也就是说你可以选择追加或不追加该属性),则表明该表单域为必填项。如果表单提交时该必填项没有任何信息,浏览器则会显示警告信息。警告信息的显示方式(包括显示内容和样式)取决于浏览器与输入框类型。
      range、color、 button和hidden类型的输入元素则不能使用required,因为这几种输入类型几乎都有默认值。

    • autofocus
      HTML5的autofocus属性可以让表单在加载完成时就有一个表单域被默认聚焦(或选中),以便于用户输入。
      例如有多个表单域追加了autofocus属性,在Chrome(v16)中会聚焦最后一个使用autofocus属性的表单域,而Firefox(v9)恰恰相反,会聚焦第一个使用autofocus的表单域。

    • autocomplete

    也可以通过给表单本身(不是fieldset)设置属性来禁用整个表单的自动完成功能。示例代码如下:

    <form id="redemption" method="post" autocomplete="off">
    • list(及对应的datalist元素)
      list属性以及对应的datalist元素可以让用户在输入框中开始输入值的时候,显示一组备选值。
      list属性中的值(awards)同时也是datalist元素的id。这样就可以让datalist与输入项关联起来。虽然将option包裹在select中不是必需的,但这样做便于为老版本浏览器提供降级方案。

    HTML5的新输入类型

    • type=”email”——支持它的浏览器会期望用户的输入匹配电子邮箱的格式。
    • type=”number”——支持该特性的
      浏览器期望输入一个数字。这种输入类型默认还提供控制按钮,允许用户简单地点击向上或向下来改变数值。
      你可能注意到在上面的代码中,我们还设置了允许输入的最小值和最大值范围,具体代码如下:
    type="number" min="1929" max="2015"

    超出范围的数字会(应该)得到特殊对待。
    - type=”url”——你猜对了,URL输入类型用于输入URL地址。
    - type=”tel”是另一种用于收集联系人信息的输入类型。tel表示表单域期望输入一个电话号码- type=e=”search”——和普通文本输入框的表现基本一样,仅在个别浏览器中渲染得有点细微差别。
    你可用pattern属性通过正则表达式来定义表单域的数据
    - type=”color”——会在支持该特性的浏览器中生成一个颜色选择器,让用户可以选择十六进制的颜色值。
    - 日期和时间输入类型
    和color类型一样,目前对date提供原生支持的浏览器寥寥无几,大多数浏览器默认都将其渲染为标准的文本输入框。超级棒的Opera已经实现了这个功能
    range输入类型会生成一个滑动条。

    CSS3

    笔记

    设备控制

    • 打开数字键盘
      <input type="tel">
    • 隐藏地址栏
      setTimeout(function(){ window.scrollTo(0, 1); }, 0);
    • 在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上
      <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
      <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
      <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

    设备交互

    1. input fixed失效问题
      参考:
      iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
      【小贴士】虚拟键盘与fixed带给移动端的痛!
      Web移动端Fixed布局的解决方案
      出现原因:
      移动端虚拟键盘出现的条件是:文本框(文本类)获得焦点,但是文本框获得焦点未必会弹出键盘;
      收起虚拟键盘的条件是:文本框失焦
      总而言之,我们认为会出现或者消失虚拟键盘的时候都可能不工作
      在移动设备上,如果文本框在上方,点击不会有什么问题:
      在设备的最下面的话,整个块会上移,以将input区域显示出来
      这个时候几个棘手的问题就出现了:
      ① 虚拟键盘的出现对页面来说是不可知的,这句话的理解是:没有键盘出现事件,没有办法获取键盘高度
      ② 键盘是“贴”在了viewport上,表面上不会对dom产生“任何”影响,但是这个时候一些定位元素的表现却变得“怪异”。

    软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。

    这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框,凡是软键盘(比如时间日期选择、select 选择等等)被唤起,都会遇到同样的问题。

    解决方案:
    使fixed的父元素不滚动,将滚动区域限制在与footer和header同级的内容部分。

    性能优化

    参考:移动开发规范概述
    要考虑Android低端机与2G网络场景下性能 注意!

    发布前必要检查项

    所有图片必须有进行过压缩
    考虑适度的有损压缩,如转化为80%质量的jpg图片
    考虑把大图切成多张小图,常见在banner图过大的场景
    

    加载性能优化, 达到打开足够快

    数据离线化,考虑将数据缓存在 localStorage
    初始请求资源数 < 4
    图片使用CSS Sprites 或 DataURI
    外链 CSS 中避免 @import 引入
    考虑内嵌小型的静态资源内容
    初始请求资源gzip后总体积 < 50kb
    静态资源(HTML/CSS/JS/Image)是否优化压缩?
    避免打包大型类库
    确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间) 注意!
    尽量使用CSS3代替图片
    初始首屏之外的静态资源(JS/CSS)延迟加载
    初始首屏之外的图片资源按需加载(判断可视区域)
    单页面应用(SPA)考虑延迟加载非首屏业务模块
    开启Keep-Alive链路复用
    

    运行性能优化, 达到操作足够流畅

    避免 iOS 300+ms 点击延时问题 注意!
    缓存 DOM 选择与计算
    避免触发页面重绘的操作
    Debounce连续触发的事件(scroll / resize / touchmove等),避免高频繁触发执行 注意!
    尽可能使用事件代理,避免批量绑定事件
    使用CSS3动画代替JS动画
    避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度
    HTML结构层级保持足够简单
    尽能少的使用CSS高级选择器与通配选择器
    Keep it simple
    

    在线性能检测评定工具使用指南

    访问 Google PageSpeed 在线评定网站
    在地址栏输入目标URL地址,点击分析按钮开始检测
    按 PageSpeed 分析出的建议进行优化,优先解决红色类别的问题
    
    展开全文
  • Python图形界面设计(Tkinter库)

    千次阅读 多人点赞 2019-08-20 15:45:33
      grid 几何布局管理器有两个最为重要的参数,个是 row,另个是 column,用来指定将子组件放置到什么位置,如果不指定 row,会将子组件放置到第 1 个可用的行上,如果不指定 column,则使用第 0 列(首列)。...


      Tkinter 模块( Tk 接口)是 Python 的标准 Tk GUI 工具包的接口。Tkinter可以在大多数 Unix 平台下使用,同样可以应用在 Windows 和 Macintosh 系统里。Tk 8.0 的后续版本可以实现本地窗口风格,并良好地运行在绝大多数平台中。

    创建 Windows 窗口

    import tkinter                      # 导入 Tkinter 模块
    win = tkinter.Tk()                  # 创建 Windows 窗口对象
    win.title('我的第一个 GUI 程序')     # 设置窗口标题
    win.geometry("800x600")             # 设置串口大小
    #win.minsize(400, 600)      # (选用)
    #win.maxsize(1440, 800)
    win.mainloop()                      # 进入消息循环,也就是显示窗口
    

    效果如下图
    在这里插入图片描述
    其中,

    • 设置窗口大小可使用geometry()方法,格式如下:
    宽度x高度       (注:x是小写字母x,不是乘号)
    
    • 可以使用minsize()方法设置窗口的最小尺寸,使用maxsize()方法设置窗口的最大尺寸,方法如下:
    窗口对象.minsize(最小宽度, 最大宽度)
    窗口对象.maxsize(最小高度, 最大高度)
    

     

    几何布局管理器

      Tkinter 几何布局管理器(Geometry Manager)用于组织和管理父组件(往往是窗口)中子组件的布局方式。Tkinter 提供了 3 种不同风格的几何布局管理类,即packgridplace

    pack 几何布局管理器

      pack 几何布局管理器采用块的方式组织组件,pack 布局根据子组件创建生成的顺序将其放在快速生成的界面中。
      调用子组件的方法pack(),则该子组件在其父组件中采用 pack 布局:

    pack(option=value, ...)
    

      pack()方法提供了如下表所示的若干参数选项。

    选项描述取值范围
    side停靠在父组件的哪一边上‘top’(默认值)、‘bottom’、‘left’、‘right’
    anchor停靠位置,对应于东、南、西、北以及4个角‘n’、‘s’、‘e’、‘w’、‘nw’、‘sw’、‘se’、‘ne’、‘center’(默认值)
    fill填充空间‘x’、‘y’、‘both’、‘none’
    expand扩展空间0或1
    ipadx、ipady组件内部在x/y方向上填充的空间大小单位为c(厘米)、m(毫米)、i(英寸)、p(打印机的点)
    padx、pady组件外部在x/y方向上填充的空间大小单位为c(厘米)、m(毫米)、i(英寸)、p(打印机的点)
    pack 几何布局管理器的 GUI 程序如下所示:
    import tkinter
    root = tkinter.Tk()
    root.geometry("400x300")
    label = tkinter.Label(root, text='hello, python')
    label.pack()        # 将Label组件添加到窗口中显示
    button1 = tkinter.Button(root, text='BUTTON1')
                        # 创建文字是“BUTTON1”的Button组件
    button1.pack(side=tkinter.LEFT)
                        # 将button1组件添加到窗口中显示,左停靠
    button2 = tkinter.Button(root, text='BUTTON2')
                        # 创建文字是“BUTTON2”的Button组件
    button2.pack(side=tkinter.RIGHT)
                        # 将button2组件添加到窗口中显示,右停靠
    root.mainloop()
    

    运行效果如下图所示。
    在这里插入图片描述

    grid 几何布局管理器

      grid 几何布局管理器采用表格结构组织组件。 子组件的位置由行/列确定的单元格决定,子组件可以跨越多行/列。在每一列中,列宽由这一列中最宽的单元格确定。grid 几何布局管理器适合表现表格形式的布局,可以实现复杂的界面,因而被广泛使用。
      调用子组件的grid()方法,则该子组件在其父组件中采用 grid 几何布局:

    grid(option=value, ...)
    

      grid()方法提供了如下表所示的若干参数选项。

    选项描述取值范围
    sticky组件津贴所在单元格的某一边角,对应于东、南、西、北以及4个角‘n’、‘s’、‘e’、‘w’、‘nw’、‘sw’、‘se’、‘ne’、‘center’(默认值)
    row单元格行号整数
    column单元格列号整数
    rowspan行跨度整数
    columnspan列跨度整数
    ipadx、ipady组件内部在x/y方向上填充的空间大小单位为c(厘米)、m(毫米)、i(英寸)、p(打印机的点)
    padx、pady组件外部在x/y方向上填充的空间大小单位为c(厘米)、m(毫米)、i(英寸)、p(打印机的点)
      grid 几何布局管理器有两个最为重要的参数,一个是 row,另一个是 column,用来指定将子组件放置到什么位置,如果不指定 row,会将子组件放置到第 1 个可用的行上,如果不指定 column,则使用第 0 列(首列)。   grid 几何布局管理器的 GUI 程序如下所示:
    from tkinter import *
    root = Tk()
    # 200x200代表了初始化是主窗口的大小,280和280代表了
    # 初始化时窗口所在的位置
    root.geometry('200x200+280+280')
    root.title('计算器示例')
    # grid(网格)布局
    L1 = Button(root, text='1', width=5, bg='yellow')
    L2 = Button(root, text='2', width=5)
    L3 = Button(root, text='3', width=5)
    L4 = Button(root, text='4', width=5)
    L5 = Button(root, text='5', width=5, bg='green')
    L6 = Button(root, text='6', width=5)
    L7 = Button(root, text='7', width=5)
    L8 = Button(root, text='8', width=5)
    L9 = Button(root, text='9', width=5, bg='yellow')
    L0 = Button(root, text='0')
    Lp = Button(root, text='.')
    L1.grid(row=0, column=0)    # 按钮放置在0行0列
    L2.grid(row=0, column=1)    # 按钮放置在0行1列
    L3.grid(row=0, column=2)    # 按钮放置在0行2列
    L4.grid(row=1, column=0)    # 按钮放置在1行0列
    L5.grid(row=1, column=1)    # 按钮放置在1行1列
    L6.grid(row=1, column=2)    # 按钮放置在1行2列
    L7.grid(row=2, column=0)    # 按钮放置在2行0列
    L8.grid(row=2, column=1)    # 按钮放置在2行1列
    L9.grid(row=2, column=2)    # 按钮放置在2行2列
    L0.grid(row=3, column=0, columnspan=2,
            sticky=E+W)    # 跨两行,左右贴紧
    Lp.grid(row=3, column=2,
            sticky=E+W)    # 左右贴紧
    root.mainloop()
    

    运行效果如下图所示:
    在这里插入图片描述

    place 几何布局管理器

      place 几何布局管理器允许指定组件的大小和位置。place 几何布局管理器的优点是可以精确地控制组件的位置,不足之处是改变窗口大小时子组件不能随之灵活地改变大小。
      调用子组件的方法place(),则该子组件在其父组件中采用 place 布局:

    place(option=value, ...)
    

      place()方法提供了如下表所示的若干参数选项,用户可以直接给参数选项赋值加以修改。

    选项描述取值范围
    x,y将组件放到指定位置的绝对坐标从0开始的整数
    relx,rely将组件放到指定位置的相对坐标0~1.0
    height,width高度和宽度,单位为像素  
    anchor对齐方式,对应于东、南、西、北以及4个角‘n’、‘s’、‘e’、‘w’、‘nw’、‘sw’、‘se’、‘ne’、‘center’(默认值)

    注意
    Python 的坐标系是左上角为原点位置(0,0),向右是 x 坐标正方向,向下是 y 坐标正方向。

    place 几何布局管理器的 GUI 示例程序如下所示:

    from tkinter import *
    root = Tk()
    root.title("登录")
    root['width'] = 200; root['height'] = 80
    Label(root, text='用户名', width=6).place(x=1, y=1)
                                # 绝对坐标(1, 1)
    Entry(root, width=20).place(x=45, y=1)
                                # 绝对坐标(45, 1)
    Label(root, text='密码', width=6).place(x=1, y=20)
                                # 绝对坐标(1, 20)
    Entry(root, width=20, show='*').place(x=45, y=20)
                                # 绝对坐标(45, 20)
    Button(root, text='登录', width=8).place(x=40, y=40)
                                # 绝对坐标(40, 40)
    Button(root, text='取消', width=8).place(x=110, y=40)
                                # 绝对坐标(110, 40)
    root.mainloop()
    

    运行效果如下图所示:
    在这里插入图片描述


     

    Tkinter 组件

      Tkinter 提供了很多组件,例如按钮、标签和文本框等,在一个 GUI 应用程序中使用,这些组件通常被称为控件或者部件。Tkinter 组件如下表所示:

    控件描述
    Button按钮控件,在程序中显示按钮
    Canvas画布控件,显示图形元素,例如线条或文本
    Checkbutton多选框控件,用于在程序中提供多项选择框
    Entry输入控件,用于显示简单的文本内容
    Frame框架控件,在屏幕上显示一个矩形区域,多用来作为容器
    Label标签控件,可以显示文本和位图
    Listbox列表框控件,用来显示一个字符串列表给用户
    Menubutton菜单按钮控件,用于显示菜单项
    Menu菜单控件,显示菜单栏、下拉菜单和弹出菜单
    Message消息控件,用来显示多行文本,与Label比较类似
    Radiobutton单选按钮控件,显示一个单选的按钮状态
    Scale范围控件,显示一个数值刻度,为输出限定范围的数字区间
    Scrollbar滚动条控件,在内容超过可视化区域时使用,例如列表框
    Text文本控件,用于显示多行文本
    Toplevel容器控件,用来提供一个单独的对话框,和Frame比较类似
    Spinbox输入控件,与Entry类似,但是可以指定输入范围值
    PanedWindowPanedWindow是一个窗口布局管理的插件,可以包含一个或者多个子控件
    LabelFrameLabelFrame是一个简单的容器控件,常用语复杂的窗口布局
    tkMessageBox用于显示应用程序的消息框
    通过组件类的构造函数可以创建其对象实例。例如:
    from tkinter import *
    root = Tk()
    button1 = Button(root, text="确定")
    

    组件的标准属性也就是所有组件(控件)的共同属性,例如大小、字体和颜色等。Tkinter 组件常用的标准属性如下表所示。

    属性描述
    dimension控件大小
    color颜色
    font控件字体
    anchor锚点(内容停靠位置),对应于东、南、西、北以及4个角
    relief控件样式
    bitmap位图,内置位图包括error、gray75、gray50、gray25、gray12、info、questhead、hourglass、question和warning,自定义位图为.xbm格式的文件
    curson光标
    text显示文本内容
    state设置组件状态为正常(normal)、激活(active)或禁用(disabled)
    用户可以通过下列方式之一设置组件的属性。
    button1 = Button(root, text="确定“)     #按钮组件的构造函数
    button1.config(text="确定")             #组件对象的config()方法的命名参数
    button1["text"] = "确定"                #组件对象的属性的赋值
    

    标签组件 Label

      Label 组件用于在窗口中显示文本或位图。
    例如,

    from tkinter import *
    win = Tk()                  # 创建窗口对象
    win.title("我的窗口")       # 设置窗口标题
    lab1 = Label(win, text='你好', anchor='nw')
                            # 创建文字是“你好”的Label组件
    lab1.pack()                 # 显示Label组件
    # 显示内置的位图
    lab2 = Label(win, bitmap='question')
                                # 创建显示疑问图标Label组件
    lab2.pack()                 # 显示Label组件
    
    # 显示自选的图片
    bm = PhotoImage(file=r'D:\Projects\Python3_TEST\Setting.png')
    lab3 = Label(win, image=bm)
    lab3.bm = bm
    lab3.pack()                 # 显示Label组件
    win.mainloop()
    

    运行效果如下图所示:
    在这里插入图片描述

    按钮组件 Button

      Button 组件(控件)是一个标准的 Tkinter 部件,用于实现各种按钮。按钮可以包含文本或图像,可以通过 command属性将调用函数或方法关联到按钮上。当 Tkinter 的按钮被按下时会自动调用该函数或方法。

    单行文本框组件 Entry 和多行文本框组件 Text

      Entry 组件主要用于输入单行内容和显示文本,可以方便地向程序传递用户参数。

    • 创建和显示 Entry 对象
    Entry 对象 = Entry(Windows 窗口对象)
    
    • 显示 Entry 对象的方法
    Entry 对象.pack()
    
    • 获取 Entry 组件的内容
        get()方法用于获取单行文本框内输入的内容。
        设置或者获取 Entry 组件内容也可以使用StringVar()对象来完成,把 Entry 的 textvariable 属性设置为StringVar()变量,再通过StringVar()变量的get()set()函数读取和输出相应文本内容。
      例如:
    s = StringVar()                 # 一个StringVar()对象
    s.set("大家好,这是测试")
    entryCd = Entry(root, textvariable=s)
                                    # Entry组件显示“大家好,这是测试”
    print(s.get())                  # 打印出“大家好,这是测试”
    
    • Entry 的常用属性
      show:如果设置为字符*,则输入文本框内的显示为*,用于密码输入。
      insertbackground:插入光标的颜色,默认为’black’。
      selectbackground和selectforeground:选中文本的背景色与前景色。
      width:组件的宽度(所占字符个数)。
      fg:字体的前景颜色。
      bg:背景颜色。
      state:设置组件状态,默认为normal,还可以设置为disabled(禁用组件)或readonly(只读)。

    列表框组件 Listbox

      列表框组件 Listbox用于显示多个项目,并且允许用户选择一个或多个项目。

    • 创建 Listbox 对象的基本方法:
    Listbox 对象 = Listbox(Tkinter Windows 窗口对象)
    
    • 显示 Listbox 对象的方法如下:
    Listbox 对象.pack()
    
    • 插入文本项
        用户可使用insert()方法向列表框组件中插入文本项,方法如下:
    Listbox 对象.insert(index, item)
    

    其中,index 是插入文本项的位置,如果在尾部插入文本项,则可使用 END;如果在当前选中插入文本项,则可使用 ACTIVE。item 是要插入的文本项。

    • 返回选中项目的索引
    Listbox 对象.curselection()
    

    返回当前选中项目的索引,结果为元组。索引号从 0 开始,0 表示第 1 项。

    • 删除文本项
    Listbox 对象.delete(first, last)
    

    删除指定范围 first~last 的项目,当不指定 last 时删除 1 个项目。

    • 获取项目内容
    Listbox 对象.get(first, last)
    

    返回指定范围 first~last 的项目,当不指定 last 时仅返回 1 个项目。

    • 获取项目个数
    Listbox 对象.size()
    
    • 获取 Listbox 内容
      需要使用 listvariable 属性为 Listbox 对象指定一个对应的变量。例如:
    m = StringVar()
    listb = Listbox(root, listvariable=m)
    listb.pack()
    root.mainloop()
    

    指定后就可以使用m.get()方法获取 Listbox 对象中的内容了。

    注意
    如果允许用户选择多个项目,需要将 Listbox 对象的 selectmode 属性设置为 MULTIPLE(表示多选),而设置为SINGLE表示单选

    示例:创建一个列表框选择内容添加到另一个列表框的 GUI 程序。

    from tkinter import *                       # 导入Tkinter库
    root = Tk()                                 # 创建窗口对象
    
    
    def callbutton1():
        for i in listb.curselection():          # 遍历选中项
            listb2.insert(0, listb.get(i))      # 添加到右侧列表框
    
    
    def callbutton2():
        for i in listb2.curselection():         # 遍历选中项
            listb2.delete(i)                    # 从右侧列表框中删除
    
    
    # 创建两个列表
    li = ['C', 'python', 'php', 'html', 'SQL', 'java']
    listb = Listbox(root)                       # 创建两个列表框组件
    listb2 = Listbox(root)
    for item in li:                             # 左侧列表框组件插入数据
        listb.insert(0, item)
    listb.grid(row=0, column=0, rowspan=2)      # 将列表框组件放置到窗口对象中
    b1 = Button(root, text='添加>>', command=callbutton1, width=20)
                                                # 创建Button组件
    b2 = Button(root, text='删除<<', comman=callbutton2, width=20)
                                                # 创建Button组件
    b1.grid(row=0, column=1, rowspan=2)         # 显示Button组件
    b2.grid(row=1, column=1, rowspan=2)         # 显示Button组件
    listb2.grid(row=0, column=2, rowspan=2)
    root.mainloop()                             # 进入消息循环
    

    以上代码执行结果如下图所示:
    ]

    单选按钮组件 Radiobutton 和复选框 Checkbutton

      单选按钮组件 Radiobutton 和复选框组件 Checkbutton 分别用于实现选项的单选和复选功能。
      Radiobutton 用于从同一组单选按钮中选择一个单选按钮(不能同时选择多个)。Radiobutton 可以显示文本,也可以显示图像。
      Checkbutton 用于选择一项或多项,同样 Checkbutton 可以显示文本,也可以显示图像。

    • 创建 Radiobutton 对象
    Radiobutton 对象 = Radiobutton(Windows 窗口对象, text=Radiobutton 组件显示的文本)
    
    • 显示 Radiobutton 对象
    Radiobutton 对象.pack()
    

      用户可使用 variable 属性为 Radiobutton 组件指定一个对应的变量。如果将多个 Radiobutton 组件绑定到同一个变量,则这些 Radiobutton 组件输入一个分组。分组后需要使用 value 设置每个 Radiobutton 组件的值,以标识该项目是否被选中。

    • Radiobutton 组件的常用属性
      variable:单选按钮索引变量,通过变量的值确定哪个单选按钮被选中。一组单选按钮使用同一个索引变量。
      value:单选按钮选中时变量的值。
      command:单选按钮选中时执行的命令(函数)。
    • Radiobutton 组件的方法
      deselect():取消选择。
      select():选择。
      invoke():调用单选按钮 command 指定的回调函数。
    • 创建 Checkbutton 对象
    Checkbutton 对象 = Checkbutton(Tkinter Windows 窗口对象, text=Checkbutton 组件显示的文本, command=单击 Checkbutton 按钮所调用的回调函数)
    
    • 显示 Checkbutton 对象
    Checkbutton 对象.pack()
    
    • Checkbutton 组件的常用属性
      variable:复选框索引变量,通过变量的值确定哪些复选框被选中。每个复选框使用不同的变量,使复选框之间相互独立。
      onvalue:复选框选中(有效)时变量的值。
      offvalue:复选框未选中(无效)时变量的值。
      command:复选框选中时执行的命令(函数)。
    • 获取 Checkbutton 组件的状态
      为了获取 Checkbutton 组件是否被选中,需要使用 variable 属性为 Checkbutton 组件指定一个对应变量,例如:
    c = tkinter.IntVar()
    c.set(2)
    check = tkinter.Checkbutton(root, text='喜欢', variable=c, onvalue=1, offvalue=2)
    check.pack()
    

    指定变量 c 后,可以使用c.get()获取复选框的状态值,也可以使用c.set()设置复选框的状态。
     
    示例:创建使用单选按钮(Radiobutton)组件选择国家的程序。

    import tkinter
    root = tkinter.Tk()
    r = tkinter.StringVar()             # 创建StringVar对象
    r.set('1')                          # 设置初始值为“1”,初始选中“中国”
    radio = tkinter.Radiobutton(root, variable=r, value='1', text='中国')
    radio.pack()
    radio = tkinter.Radiobutton(root, variable=r, value='2', text='美国')
    radio.pack()
    radio = tkinter.Radiobutton(root, variable=r, value='3', text='日本')
    radio.pack()
    radio = tkinter.Radiobutton(root, variable=r, value='4', text='加拿大')
    radio.pack()
    radio = tkinter.Radiobutton(root, variable=r, value='5', text='韩国')
    radio.pack()
    root.mainloop()
    print(r.get())                      # 获取被选中单选按钮变量值
    

    以上代码的执行结果如下图所示。
    在这里插入图片描述

    菜单组件 Menu

      图形用户界面应用程序通常提供菜单,菜单包含各种按照主题分组的基本命令。通常,图形用户界面应用程序包括两种类型的菜单。
    (1) 主菜单:提供窗体的菜单系统。通过单击可下拉出子菜单,选择命令可执行相关的操作。常用的主菜单一般包括文件、编辑、视图、帮助等。
    (2) 上下文菜单(也称为快捷菜单):通过右击某对象而弹出的菜单,一般为与该对象相关的常用菜单命令,例如剪切、复制、粘贴等。

    • 创建 Menu 对象的基本方法
    Menu 对象 = Menu(Windows 窗口对象)
    
    • 将 Menu 对象显示在窗口中的方法
    Windows 窗口对象['menu'] = Menu 对象
    Windows 窗口对象.mainloop()
    

    示例:使用 Menu 组件的简单例子:

    from tkinter import *
    root = Tk()
    
    
    def hello():                # 菜单项事件函数,每个菜单项可以单独写
        print("你单击主菜单")
    
    
    m = Menu(root)
    for item in ['文件', '编辑', '视图']:     # 添加菜单项
        m.add_command(label=item, command=hello)
    root['menu'] = m                        # 附加主菜单到窗口
    root.mainloop()
    

    运行效果如下图所示。
    在这里插入图片描述

    消息窗口组件 Messagebox

      消息窗口组件 Messagebox 用于弹出提示框向用户进行告警,或让用户选择下一步如何操作。
      消息框包括很多类型,常用的有info、warning、error、yesno、okcancel等,包含不同的图标、按钮以及弹出提示音。
    示例:演示各消息框的程序:

    import tkinter as tk
    from tkinter import  messagebox as msgbox
    
    
    def btn1_clicked():
        msgbox.showinfo("Info", "Showinfo test.")
    
    def btn2_clicked():
        msgbox.showwarning("Warning", "Showwarning test.")
    
    def btn3_clicked():
        msgbox.showerror("Error", "Showerror test.")
    
    def btn4_clicked():
        msgbox.askquestion("Question", "Askquestion test.")
    
    def btn5_clicked():
        msgbox.askokcancel("OkCancel", "Askokcancel test.")
    
    def btn6_clicked():
        msgbox.askyesno("YesNo", "Askyesno test.")
    
    def btn7_clicked():
        msgbox.askretrycancel("Retry", "Askretrycancel test.")
    
    root = tk.Tk()
    root.title("MsgBox Test")
    btn1 = tk.Button(root, text="showinfo", comman=btn1_clicked)
    btn1.pack(fill=tk.X)
    btn2 = tk.Button(root, text="showwarning", comman=btn2_clicked)
    btn2.pack(fill=tk.X)
    btn3 = tk.Button(root, text="showerror", comman=btn3_clicked)
    btn3.pack(fill=tk.X)
    btn4 = tk.Button(root, text="askquestion", comman=btn4_clicked)
    btn4.pack(fill=tk.X)
    btn5 = tk.Button(root, text="askokcancel", comman=btn5_clicked)
    btn5.pack(fill=tk.X)
    btn6 = tk.Button(root, text="askyesno", comman=btn6_clicked)
    btn6.pack(fill=tk.X)
    btn7 = tk.Button(root, text="askretrycancel", comman=btn7_clicked)
    btn7.pack(fill=tk.X)
    root.mainloop()
    

    运行效果如下图所示:
    在这里插入图片描述

    框架组件 Frame

      Frame 组件是框架组件,在分组组织其他组件的过程中是非常重要的,负责安排其他组件的位置。Frame 组件在屏幕上显示为一个矩形区域,作为显示其他组件的容器。

    • 创建 Frame 对象的基本方法
    Frame 对象 = Frame(窗口对象, height=高度, width=宽度, bg=背景色, ...)
    
    • 显示 Frame 对象的方法
    Frame 对象. pack()
    
    • 向 Frame 组件中添加组件
      在创建组件时指定其容器为 Frame 组件即可,例如
    Label(Frame 对象, text='Hello').pack()  #向Frame组件中添加一个Label组件
    
    • LabelFrame 组件
      LabelFrame 组件是有标题的 Frame 组件,可以使用 text 属性设置LabelFrame 组件的标题,方法如下:
    LabelFrame(窗口对象, height=高度, width=宽度, text=标题).pack()
    

    示例:使用两个 Frame 组件和一个 LabelFrame 组件的例子。

    from tkinter import *
    
    root = Tk()                             # 创建窗口对象
    root.title("使用 Frame 组件的例子")    # 设置窗口标题
    f1 = Frame(root)                        # 创建第1个Frame组件
    f1.pack()
    f2 = Frame(root)                        # 创建第2个Frame组件
    f2.pack()
    f3 = LabelFrame(root, text='第 3 个 Frame')
                                            # 第3个LabelFrame组件,放置在窗口底部
    f3.pack(side=BOTTOM)
    
    redbutton = Button(f1, text="Red", fg="red")
    redbutton.pack(side=LEFT)
    brownbutton = Button(f1, text="Brown", fg="brown")
    brownbutton.pack(side=LEFT)
    bluebutton = Button(f1, text="Blue", fg="blue")
    bluebutton.pack(side=LEFT)
    blackbutton = Button(f2, text="Black", fg="black")
    blackbutton.pack()
    greenbutton = Button(f3, text="Green", fg="Green")
    greenbutton.pack()
    root.mainloop()
    

    运行效果如下图所示:
    在这里插入图片描述

    • 刷新 Frame
        用 Python 做 GUI 图形界面,可使用after()方法每隔几秒刷新 GUI 图形界面。
        例如,下面的代码实现计数器功能,并且文字背景色不断改变。
    from tkinter import *
    colors = ('red', 'orange', 'yellow', 'green', 'blue', 'purple')
    root = Tk()
    f = Frame(root, height=200, width=200)
    f.color = 0
    f['bg'] = colors[f.color]       # 设置框架背景色
    lab1 = Label(f, text='0')
    lab1.pack()
    
    
    def foo():
        f.color = (f.color+1) % (len(colors))
        lab1['bg'] = colors[f.color]
        lab1['text'] = str(int(lab1['text'])+1)
        f.after(500, foo)       # 隔500 ms执行foo()函数刷新屏幕
    f.pack()
    f.after(500, foo)
    root.mainloop()
    

    显示效果如下图所示:
    在这里插入图片描述
    示例:开发移动电子广告效果就可以使用after()方法实现不断移动 lab1。

    from tkinter import *
    root = Tk()
    f = Frame(root, height=200, width=200)
    lab1 = Label(f, text='欢迎参观工学院')
    x = 0
    
    def foo():
        global x
        x += 10
        if x > 200:
            x = 0
        lab1.place(x=x, y=0)
        f.after(500, foo)       # 隔500 ms执行foo()函数刷新屏幕
    
    f.pack()
    f.after(500, foo)
    root.mainloop()
    

    显示效果如下图所示:
    在这里插入图片描述


     

    Tkinter 字体

      通过组件的 font 属性可以设置其显示文本的字体,注意在设置组件字体前首先要能表示一个字体。

    通过元组表示字体

      通过 3 个元素的元组可以表示字体:

    (font family, size, modifiers)
    

      作为一个元组的第 1 个元素的 font family 是字体名;size 为字体大小,单位为 point;modifiers 包含粗体、斜体、下划线的样式修饰符。
    例如:

    ("Times New Roman ", "16")                      # 16点阵的Times字体
    ("Times New Roman ", "24", "bold italic")       # 24点阵的Times字体,且为粗体、斜体
    

    示例:通过元组表示字体设置标签的字体。

    from tkinter import *
    root = Tk()
    # 创建Label
    for ft in ('Arial', ('Courier New', 19, 'italic'),
               ('Comic Sans MS',), 'Fixdsys', ('MS Sans Serif',)
               , ('MS Serif',), 'Symbol', 'System',
               ('Times New Roman',), 'Verdana'):
        Label(root, text='hello sticky', font=ft).grid()
    root.mainloop()
    

    运行效果如下图所示:
    在这里插入图片描述

    通过 Font 对象表示字体

      使用 tkFont.Font 来创建字体,格式如下:

    ft = tkFont.Font(family='字体名', size, weight, 
                    salant, underline, overstrike)
    

      其中,size 为字体大小;weight=‘bold’ 或 ‘normal’,‘bold’ 为粗体;slant=‘italic’ 或 ‘narmal’,‘italic’ 为斜体;underline=1 或 0, 1 为下划线;overstrike=1 或 0, 1为删除线。

    ft = Font(fanily='Helvetica', size=36, weigth='bold')
    

    示例:通过 Font 对象设置标签字体。

    # 通过Font对象来创建字体
    from tkinter import *
    import tkinter.font
    
    root = Tk()
    # 指定字体名称、大小、样式
    ft = tkinter.font.Font(family='Fixdsys', size=20,
                           weight='bold')
    Label(root, text='hello sticky', font=ft).grid()
                                    # 创建一个Label
    root.mainloop()
    

    运行效果如下图所示:
    在这里插入图片描述
    通过tkFont.families()函数可以返回所有可用的字体。

    from tkinter import *
    import tkinter.font                     # 引入字体模块
    root = Tk()
    print(tkinter.font.families())
    

    输出结果:

    ('System', '@System', 'Terminal', '@Terminal', 'Fixedsys', '@Fixedsys', 'Modern', 'Roman', 'Script', 'Courier', 'MS Serif', 'MS Sans Serif', 'Small Fonts', 'Adobe 黑体 Std R', '@Adobe 黑体 Std R', 'Adobe 明體 Std L', '@Adobe 明體 Std L', 'Adobe Myungjo Std M', '@Adobe Myungjo Std M', 'Adobe Pi Std', 'Adobe 宋体 Std L', '@Adobe 宋体 Std L', 'Courier Std', 'Kozuka Gothic Pr6N M', '@Kozuka Gothic Pr6N M', 'Kozuka Mincho Pr6N R', '@Kozuka Mincho Pr6N R', 'Myriad CAD', 'Mathcad UniMath Prime', 'Marlett', 'Arial', 'Arabic Transparent', 'Arial Baltic', 'Arial CE', 'Arial CYR', 'Arial Greek', 'Arial TUR', 'Arial Black', 'Bahnschrift Light', 'Bahnschrift SemiLight', 'Bahnschrift', 'Bahnschrift SemiBold', 'Bahnschrift Light SemiCondensed', 'Bahnschrift SemiLight SemiConde', 'Bahnschrift SemiCondensed', 'Bahnschrift SemiBold SemiConden', 'Bahnschrift Light Condensed', 'Bahnschrift SemiLight Condensed', 'Bahnschrift Condensed', 'Bahnschrift SemiBold Condensed', 'Calibri', 'Calibri Light', 'Cambria', 'Cambria Math', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Courier New Baltic', 'Courier New CE', 'Courier New CYR', 'Courier New Greek', 'Courier New TUR', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Georgia', 'Impact', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Leelawadee UI Semilight', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', '@Malgun Gothic', 'Malgun Gothic Semilight', '@Malgun Gothic Semilight', 'Microsoft Himalaya', 'Microsoft JhengHei', '@Microsoft JhengHei', 'Microsoft JhengHei UI', '@Microsoft JhengHei UI', 'Microsoft JhengHei Light', '@Microsoft JhengHei Light', 'Microsoft JhengHei UI Light', '@Microsoft JhengHei UI Light', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', '微软雅黑', '@微软雅黑', 'Microsoft YaHei UI', '@Microsoft YaHei UI', '微软雅黑 Light', '@微软雅黑 Light', 'Microsoft YaHei UI Light', '@Microsoft YaHei UI Light', 'Microsoft Yi Baiti', 'MingLiU-ExtB', '@MingLiU-ExtB', 'PMingLiU-ExtB', '@PMingLiU-ExtB', 'MingLiU_HKSCS-ExtB', '@MingLiU_HKSCS-ExtB', 'Mongolian Baiti', 'MS Gothic', '@MS Gothic', 'MS UI Gothic', '@MS UI Gothic', 'MS PGothic', '@MS PGothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Nirmala UI Semilight', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Black', 'Segoe UI Emoji', 'Segoe UI Historic', 'Segoe UI Light', 'Segoe UI Semibold', 'Segoe UI Semilight', 'Segoe UI Symbol', '宋体', '@宋体', '新宋体', '@新宋体', 'SimSun-ExtB', '@SimSun-ExtB', 'Sitka Small', 'Sitka Text', 'Sitka Subheading', 'Sitka Heading', 'Sitka Display', 'Sitka Banner', 'Sylfaen', 'Symbol', 'Tahoma', 'Times New Roman', 'Times New Roman Baltic', 'Times New Roman CE', 'Times New Roman CYR', 'Times New Roman Greek', 'Times New Roman TUR', 'Trebuchet MS', 'Verdana', 'Webdings', 'Wingdings', 'Yu Gothic', '@Yu Gothic', 'Yu Gothic UI', '@Yu Gothic UI', 'Yu Gothic UI Semibold', '@Yu Gothic UI Semibold', 'Yu Gothic Light', '@Yu Gothic Light', 'Yu Gothic UI Light', '@Yu Gothic UI Light', 'Yu Gothic Medium', '@Yu Gothic Medium', 'Yu Gothic UI Semilight', '@Yu Gothic UI Semilight', '等线', '@等线', '等线 Light', '@等线 Light', '仿宋', '@仿宋', '楷体', '@楷体', '黑体', '@黑体', 'HoloLens MDL2 Assets', 'Meiryo', '@Meiryo', 'Meiryo UI', '@Meiryo UI', 'MS Mincho', '@MS Mincho', 'MS PMincho', '@MS PMincho', 'UD Digi Kyokasho N-B', '@UD Digi Kyokasho N-B', 'UD Digi Kyokasho NP-B', '@UD Digi Kyokasho NP-B', 'UD Digi Kyokasho NK-B', '@UD Digi Kyokasho NK-B', 'UD Digi Kyokasho N-R', '@UD Digi Kyokasho N-R', 'UD Digi Kyokasho NP-R', '@UD Digi Kyokasho NP-R', 'UD Digi Kyokasho NK-R', '@UD Digi Kyokasho NK-R', 'Yu Mincho', '@Yu Mincho', 'Yu Mincho Demibold', '@Yu Mincho Demibold', 'Yu Mincho Light', '@Yu Mincho Light', 'Book Antiqua', 'Century', 'Century Gothic', 'Leelawadee', 'Microsoft Uighur', 'Wingdings 2', 'Wingdings 3', '方正舒体', '@方正舒体', '方正姚体', '@方正姚体', '隶书', '@隶书', '幼圆', '@幼圆', '华文彩云', '@华文彩云', '华文仿宋', '@华文仿宋', '华文琥珀', '@华文琥珀', '华文楷体', '@华文楷体', '华文隶书', '@华文隶书', '华文宋体', '@华文宋体', '华文细黑', '@华文细黑', '华文行楷', '@华文行楷', '华文新魏', '@华文新魏', '华文中宋', '@华文中宋', 'MT Extra', 'Arvo', 'Droid Serif', 'Indie Flower', 'Lobster', 'Open Sans', 'Poiret One', 'Raleway', 'Roboto Condensed', 'Roboto Slab', '汉仪长仿宋体', '@汉仪长仿宋体', 'SWAstro', 'OLF SimpleSansOC', 'SWComp', 'SWGothe', 'SWGothg', 'SWGothi', 'SWGrekc', 'SWGreks', 'SWIsop1', 'SWIsop2', 'SWIsop3', 'SWIsot1', 'SWIsot2', 'SWIsot3', 'SWItal', 'SWItalc', 'SWItalt', 'SWMap', 'SWMath', 'SWMeteo', 'SWMono', 'SWMusic', 'SWRomnc', 'SWRomnd', 'SWRomns', 'SWRomnt', 'SWScrpc', 'SWScrps', 'SWSimp', 'SWTxt', 'SWGDT', 'SWLink', 'SOLIDWORKS GDT', 'INSPECTIONXPERT GDT FRAMES', 'INSPECTIONXPERT GDT NOFRMS', 'NX ANSI Symbols', 'NX Constraints', 'NX ISO Symbols', 'FontAwesome', 'icon-brand', 'Roboto', 'GLYPHICONS Halflings', 'icon-large', 'icon-small', 'icon-ui', 'Museo Sans For Dell')
    
    

    Python 事件处理

      程序可以使用事件处理函数来指定当触发某个时间时所做的反应(操作)。

    事件类型

      事件类型的通用格式如下:

    <[modifier-]···type[-detail]>
    

      事件类型必须放置于尖括号<>内。 type 描述了类型,例如键盘按键、鼠标单击。modifier 用于组合键定义,例如 Control、Alt。detail 用于明确定义是哪一个键或按钮的事件,例如 1 表示鼠标左键、2 表示鼠标中键、3 表示鼠标右键。
     
    举例如下:

    <Button-1>                      # 按下鼠标左键
    <KeyPress-A>                    # 按下键盘上的A键
    <Control-Shift-KeyPress-A>      # 同时按下了Control、Shift、A 3个键
    

     
    Python 中的键盘事件如下:

    名称描述
    KeyPress按下键盘上的某键时触发,可以在detail部分指定是哪个键
    KeyRelease释放键盘上的某键时触发,可以在detail部分指定是哪个键

    Python 中的鼠标事件如下:

    名称描述
    ButtonPress或Button按下鼠标某键,可以在detail部分指定是哪个键
    ButtonRelease释放鼠标某键,可以在detail部分指定是哪个键
    Motion点中组件的同时拖曳组件移动时触发
    Enter当鼠标指针移进某组件时触发
    Leave当鼠标指针移出某组件时触发
    MouseWheel当鼠标滚轮滚动时触发

    Python 中的窗体事件如下:

    名称描述
    Visibility当组件变为可视状态时触发
    Unmap当组件由显示状态变为隐藏状态时触发
    Map当组件由隐藏状态变为显示状态时触发
    Expose当组件从原本被其他组件遮盖的状态中暴露出来时触发
    FocusIn当组件获得焦点时触发
    FocusOut当组件失去焦点时触发
    Configure当改变组件大小时触发,例如拖曳窗体边缘
    Property当窗体的属性被删除或改变时触发,属于Tk的核心事件
    Destroy当组件被销毁时触发
    Activate与组件选项中的state项有关,表示组件由不可用转为可用,例如按钮由disabled(灰色)转为enabled
    Deactivate与组件选项中的state项有关,表示组件由可用转为不可用,例如按钮由enabled转为disabled(灰色)

    modifier 组合键定义中常用的修饰符见下表:

    修饰符描述
    AltAlt键按下
    Any任何按键按下,例如
    ControlControl键按下
    Double两个事件在短时间内发生,例如双击鼠标左键
    LockCaps Lock键按下
    ShiftShift键按下
    Triple类似于Double,3个事件短时间内发生

    可以用短格式表示事件,例如 <1> 等同于 <Button-1> 、<x>等同于 <KeyPress-x>。
    对于大多数的单字符按键,用户还可以忽略 “ <> ” 符号,但是空格键和尖括号键不能这样做(正确的表示分别为 <space>、<less>)。

    事件绑定

      程序建立一个处理某一事件的事件处理函数称为绑定

    • 创建组件对象时指定
      在创建组件对象实例时,可以通过其命名参数 command 指定事件处理函数。例如:
    def callback():                 # 事件处理函数
            showinfo("Python comman", "人生苦短,我用Python")
    Bu1 = Button(root, text="设置command事件调用命令", command=callback)
    Bul.pack()
    
    • 实例绑定
      调用组件对象实例方法bind()可以为指定组件实例绑定事件,这是最常用的事件绑定方式。
    组件对象实例名.bind("<事件类型>", 事件处理函数)
    
    • 标识绑定
      在 Canvas 画布中绘制各种图形,将图形与事件绑定可使用标识绑定函数tag_bind()。预先为图形定义标识 tag 后,通过标识 tag 来绑定事件。例如:
    cv.tag_bind('r1', '<Button-1>', printRect)
    

     
    示例:标识绑定的例子。

    from tkinter import *
    root = Tk()
    
    def printRect(event):
        print('rectangle左键事件')
    
    def printRect2(event):
        print('rectangle右键事件')
    
    def printLine(event):
        print('Line事件')
    
    cv = Canvas(root, bg='white')
                            # 创建一个Canvas,设置其背景色为白色
    rt1 = cv.create_rectangle(
        10, 10, 110, 110,
        width=8, tags='r1')
    cv.tag_bind('r1', '<Button-1>', printRect)
                            # 绑定item与鼠标左键事件
    cv.tag_bind('r1', '<Button-3>', printRect2)
                            # 绑定item与鼠标右键事件
    # 创建一个line,并将其tags设置为'r2'
    cv.create_line(180, 70, 280, 70, width=10, tags='r2')
    cv.tag_bind('r2', '<Button-1>', printLine)
                            # 绑定item与鼠标左键事件
    cv.pack()
    root.mainloop()
    

    显示效果如下图所示:
    在这里插入图片描述

    事件处理函数

    • 定义事件处理函数
        事件处理函数往往带有一个 event 参数,在触发事件调用事件处理函数时将传递 Event 对象实例。
    def callback(event):                    # 事件处理函数
            showinfo("Python command", "人生苦短,我用Python")
    

      Event 对象可以获取各种相关参数,主要参数如下表所示。

    参数说明
    .x,.y鼠标相对于组件对象左上角的坐标
    .x_root,.y_root鼠标相对于屏幕左上角的坐标
    .keysym字符串命名按键,例如Escape、F1~F12、Scroll_Lock、Pause、Insert、Delte、Home、Prior(这个是page up)、Next(这个是page down)、End、Up、Right、Left、Down、Shift_L、Shift_R、Control_L、Control_R、Alt_L、Alt_R、Win_L
    .keysym_num数字代码命名按键
    .keycode键码,但是它不能反映事件前缀Alt、Control、Shift、Lock,并且它不区分大小写按键,即输入a和A是相同的键码
    .time时间
    .type事件类型
    .widget触发事件的对应组件
    .char字符

    Event 对象按键的详细信息如下表所示:

    .keysym.keycode.keysym_num说明
    Alt_L6465513左手边的Alt键
    Alt_R11365514右手边的Alt键
    BackSpace2265288BackSpace键
    Cancel11065387Pause Break键
    F1~F1167~7765470~65480功能键F1~F11
    Print11165377打印屏幕键
      示例:触发KeyPress键盘事件的例子。
    from tkinter import *       # 导入Tkinter库
    
    def printkey(event):        # 定义的函数监听键盘事件
        print('你按下了: ' + event.char)
    
    root = Tk()                 # 实例化tk
    entry = Entry(root)         # 实例化一个单行输入框
    # 给输入框绑定按键监听事件<KeyPress>为监听任何按键
    # <KeyPress-x>为监听某键x,例如<KeyPress-A>为监听A、
    # <KeyPress-Return>为监听回车
    entry.bind('<KeyPress>', printkey)
    entry.pack()
    root.mainloop()             # 显示窗体
    

    运行效果如下图所示:
    在这里插入图片描述
     
    示例:获取鼠标单击标签时坐标的鼠标事件例子。

    from tkinter import *               # 导入Tkinter库
    
    def leftClick(event):               # 定义的函数监听鼠标事件
        print("x轴坐标:", event.x)
        print("y轴坐标", event.y)
        print("相对于屏幕左上角x轴坐标:", event.x_root)
        print("相对于屏幕左上角y轴坐标:", event.y_root)
    
    root = Tk()                         # 实例化tk
    lab = Label(root, text="hello")     # 实例化一个Label
    lab.pack()                          # 显示Label组件
    # 给Label绑定鼠标监听事件
    lab.bind("<Button-1>", leftClick)
    root.mainloop()                     # 显示窗体
    

    运行效果如下图所示:
    在这里插入图片描述

    展开全文
  • 本章任务 ...1)它是全球最著名的设计软件之 2)它绘制出来的矢量图形可以任意放大、缩小且不失真 3)它可以实现矢量与位图的相互转化 位图与矢量的区别: 位图(点阵)——由像素...
  • Python快速编程入门课后程序题答案

    万次阅读 多人点赞 2019-06-19 23:17:45
    前言 本文只是简单的整理了一下课后习题的编程题,具体的...1、编写个Python程序,输出如下效果。 ++++++++++ + + ++++++++++ print("+++++++++++") print("+ +") print("+++++++++++") 2、编写个Pyt...
  • C语言程序设计精髓习题总汇(上)

    万次阅读 多人点赞 2019-12-19 10:10:32
    文章目录 第章 认识变量和常量 1.1 hello world! 1.2 在屏幕上输出多行信息 1.3 计算半圆弧长以及半圆的面积 1.4 计算长方形体积 第二章 计算 2.1 输出逆序数 2.2 计算总分和平均数 2.3 存款利率计算器V1.0 2.4 数...
  • 如果要写测距的话要观察测的是否准确,因为我手里正好有块OLED屏,我就讲测得的距离放到了屏幕上,就可以直接观察测的距离了,你如果手里没有屏幕也可以用个串口程序讲数值传到电脑上去,只是这个我还没尝试过,...
  • c语言程序设计精髓第二章编程题

    万次阅读 2019-05-07 23:12:37
    从键盘任意输入个3位整数,编程计算并输出它的逆序数(忽略整数前的正负号)。例如,输入-123,则忽略负号,由123分离出其百位1、十位2、个位3,然后计算3*100+2*10+1 = 321,并输出321。 提示: 1. 从键盘输入...
  • 圆角矩形线条,圆角矩形色块,圆角矩形裁艺术创意设计,时尚配色,大气排版,适合商务工作汇报、工作总结报告的通用圆角矩形裁及创意商务汇报总结ppt模板。
  • 移动端 UI设计尺寸()篇

    万次阅读 2018-04-03 17:27:50
    现象首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且还有...实际上大部分的app UI设计和移动端网...
  • NFC近场通信(Near Field Communication)是种短距离的高频无线通信技术,允许电子设备之间进行非接触点对点数据传输(在十厘米内)交换数据。
  • 胰岛素泵是种便携式医疗设备,在美国,其设计和制造由美国食品与药物管理局(FDA)监管。这意味着:其设计和建造必须遵循准确规定的流程;其性能必须满足严格的文档化管理、开发测试、生产测试和现场维护等要求。如...
  • 脉冲金属探测器其线圈的设计有很多电路,出现在互联网上的脉冲感应金属探测器。虽然它们用不同的方式去对信号进行处理,产生磁场脉冲的电子元件,...对于这些情况,个25厘米或40厘米的线圈就可以了。在我的使用情况
  • 从生活中领悟设计模式(Python)

    千次阅读 2018-07-01 03:45:55
    课程介绍 设计模式(Design Pattern)是一套被反复使用、多数人知晓的、无数工程师实践的代码设计经验的...本课程内容将会从生活的角度,在生活的每个细节和故事中解读个个设计模式。力求用最通俗的语言阐述最难...
  • 汽车倒车雷达系统的设计与实现(

    千次阅读 多人点赞 2019-05-20 22:54:38
    @[汽车倒车雷达系统的设计与实现(初稿)] 毕业设计(论文) 题 目: 汽车倒车雷达系统的设计与实现 电气与控制工程 电气工程及其 ...汽车倒车雷达系统是安装于汽车尾部的种超声波雷达侦测系统,...
  • 输出个整数序列中与指定数字相同的数的个数。 输入 输入包含三行: 第行为N,表示整数序列的长度(N <= 100); 第二行为N个整数,整数之间以个空格分开; 第三行包含个整数,为指定的整数m。 输出 ...
  • --物理分辨率分辨率网点密度(DPI)像素密度(PPI)逻辑分辨率(pt--point),像素倍率前端与设计所用的尺寸设计尺寸的问题-iPhone的pt与px的倍率关系设计的常用尺寸---移动端(ios)设计师规则是用来打破的,不用称为个个...
  • Java图形界面编程

    万次阅读 多人点赞 2019-02-23 22:23:45
    、Java图形用户界面(gui)介绍 1、Java GUI简介   图形用户界面(Graphics User Interface,GUI)是用户与程序交互的窗口,比命令行的界面更加直观并且更好操作。   Sun已经提供了个跨平台GUI开发工具包AWT...
  • )菜单设计 、建立用户菜单 1、概况: 用户菜单一般含有级菜单和二级菜单,乃至多级菜单。每级菜单又包含多个菜单项。建立菜单可以使用uimenu函数。 2、uimenu函数调用: %建立级菜单的函数调用: 级...
  • 作者是韩国第本关卡设计书的作者! ------------------------------------------------------------------------------------------------------------------------------------- 推荐语: 虽然射击类游戏在...
  • LaTeX中TikZ绘图备忘

    万次阅读 多人点赞 2019-01-13 14:46:24
      LaTeX中的TikZ绘图功能很强,为了方便以后用到的时候好查询,所以...  原选自裘巍老师所著的《编译器设计之路》第8页1-2。下面介绍我用LaTeX绘制的过程、代码与一些说明。     过程介绍: 包含tik...
  • python语法基础汇总

    千次阅读 多人点赞 2019-11-05 10:29:42
    文章目录python语法基础、简介及运算符什么是计算机语言编译型语言和解释型语言Python的介绍Python开发环境搭建Python的交互界面Python和Sublime的整合几个概念基本语法字面量和变量变量和标识符数据类型类型检查...
  • 移动用户体验设计:iOS APP体验设计

    千次阅读 2016-03-09 17:14:40
    转载地址:http://blog.csdn.net/enuola/article/details/7901326iOS APP体验设计不像互联网的体验设计那样,有堆的方法论和可以“借鉴”的案例。 目前除了苹果的和前Palm的外,没有找到更好的设计哲学和方法论。...
  • 地图整饰-框架与格网

    千次阅读 2016-11-28 16:56:43
    地图整饰-框架与格网 by 李远祥 地图整饰元素中最常见的就是框和网格了。只要确定了出的纸张(就是图纸的大小),基本上就开始定义框和格网。 在ArcMap里面,框的定义还是相对来说要简单一些。在地图的...
  • MATLAB 图形用户界面设计

    千次阅读 2018-06-14 10:40:50
    例如,按钮的Callback是由于鼠标的次单击引起的,而Pop-up Menu则是鼠标单击下拉按钮,然后在列表中单击个条目之后发生的。 (2)BusyAction属性:处理回调函数的中断。该属性有两种选项,即Cancel(取消中断...
  • 本次课设的要求是设计制作个超声波测距仪,测距范围要求为2米以上,精度为1厘米以内。 本作品使用AT89S51做控制器,超声波接收与发射的频率为40KHZ,采用74LS04芯片构成超声波发射电路,CX20106A芯片构成超声波...
  • 建筑平面图, 建筑设计图, 家具摆放图, 制作, 开发, 软件, VC++源代码组件库2018!--100%源码(全部采用Visual C++/MFC编写)开放建筑平面制图源码库! 使用E-Form++可视化图形组件库开发类似于Visio的建筑平面图、布局...
  • 、适配国家语言 (1)手机系统语言适配 (2)应用切换语言 二、屏幕适配 (1)图片适配 (2)、XML布局适配 (3)、横竖屏适配 三、适配不同系统版本 前言 智能手机的用户分布在不同国家,且偏好各异,...
  • 对于新的剪刀式键盘,苹果在内部进行了重新设计。苹果最初于2017年12月在iMac Pro中加入了这种芯片,用于多种安全目的,自2018开始加入MacBook笔记本系列中。16寸MacBook Pro内置6枚扬声器,其中4枚是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,272
精华内容 4,108
关键字:

一厘米实际图