学习Tkinter图形界面编程,编一个简单的计算器(一)——界面部分

in #cn2 years ago

Tkinter是python自带的图形界面库,虽然功能简单,但强在简单易学,开箱即用,安装python时已经自带了,不需要额外安装。下面我们就通过编一个简单的计算器来学习Tkinter图形界面编程的基本知识。

1.Tkinter的编程哲学:

Tkinter里面一切都是窗体+小部件,小部件种类很多,有标签、按钮、输入栏、菜单、画布。。。而Tkinter的编程哲学简单概括就是:

  • 1、要有窗体
  • 2、定义一个部件
  • 3、把部件放到窗体上

下面我们就通过一个简单的实例来学习。

2、Tkinter编程实例:

(1)要有窗体

添加一个窗体非常简单,只要三行python代码就能实现:

from Tkinter import *

root=Tk() 

root.mainloop()

其中root=Tk() 是创建窗口实例,mainloop就是主循环的意思,windows系统中图形界面都是一个无限循环,等待用户的输入。所以第三句就是启动主循环的意思。运行这个程序就可以看到一个窗体了。如下图:
Image 1.png
图一;来源:本人电脑截图

(2)定义一个部件:

这里我们定义一个输入框,英文叫Entry,就是像steemit发帖界面下面,填写标签的栏目,只能写一行的文本框。代码如下:

from Tkinter import *

root=Tk()

#######################
e=Entry(root,width=50)
#######################
root.mainloop()

中间加入的语句就是创立一个输入框部件,并定义它位于root窗体上,宽度为50。这时运行程序还看不到这个部件,因为还需要第三步。

(3)把部件放到窗体上:

Tkinter中把部件放到窗体上有几种方式,常见的是两种:打包(pack)、网格(grid)。打包非常简单,就是按先后顺序堆放。网格的控制能力强一些,在后面的计算器部分再讲。这里我们直接把输入框“打包”到窗体上,也是只要一行代码就行:

from Tkinter import *

root=Tk()

#####################
e=Entry(root,width=50)

e.pack()
#####################
root.mainloop()

就是e.pack()就行了。再运行程序可以看到输入框了,可以在里面输入字符串:
Image 2.png
图二;来源:本人截图

看来Tkinter图形界面编程确实简单。下面我们继续添加数字和运算符号按钮,制作一个计算器。

3、计算器的界面编程

(1)网格(grid)布局方式:

网格就是把窗体划分成行(row)和列(column),把部件按照网格坐标放到相应的位置上就行了,比如上面的程序,把pack布局改成grid布局只需要将“e.pack()”改写成:

e.grid(row=0,column=0)

就行了。意思就是将输入框放到网格的第一行,第一列(计算机中一般从0开始计数)。

(2)添加数字按钮:

按钮就是Button部件,基本的定义内容就是母窗体或部件、显示文字(text)、执行操作(command),下面我们定义数字键“7”:

btn7=Button(root,text='7',width=16,command=add)

btn7.grid(row=1,column=0)

上面的语句中width是按钮的宽度。运行程序可以看到,按钮7被添加到输入框的下一行:
Image 3.jpg
图三;来源:本人截图
按照同样的方法我们把0~9以内的其他数字按钮添加,代码为:

#-*-coding:utf-8 -*-
from Tkinter import *

def add():
    return 
root=Tk()

e=Entry(root,width=64)
e.grid(row=0,column=0)

#设置按键
btn7=Button(root,text='7',width=16,command=add)
btn8=Button(root,text='8',width=16,command=add)
btn9=Button(root,text='9',width=16,command=add)
btn4=Button(root,text='4',width=16,command=add)
btn5=Button(root,text='5',width=16,command=add)
btn6=Button(root,text='6',width=16,command=add)
btn1=Button(root,text='1',width=16,command=add)
btn2=Button(root,text='2',width=16,command=add)
btn3=Button(root,text='3',width=16,command=add)

btn7.grid(row=1,column=0)
btn8.grid(row=1,column=1)
btn9.grid(row=1,column=2)
btn4.grid(row=2,column=0)
btn5.grid(row=2,column=1)
btn6.grid(row=2,column=2)
btn1.grid(row=3,column=0)
btn2.grid(row=3,column=1)
btn3.grid(row=3,column=2)
root.mainloop()

本文主要关注界面的编写,所以按键对应的操作函数暂时用个空函数add()代替。运行程序,会发现界面并不是我们预想的那样:
Image 4.jpg
图四;来源:本人截图

原来是长长的输入框把第一列撑爆了,这时我们需要给输入框的网格位置定义再加上一项:columspan(列跨度),让输入框能够横跨4列。将上面代码里"e.grid(row=0,column=0)"修改为:

e.grid(row=0,column=0,columnspan=4)

现在看上去要正常多了:
Image 5.jpg
图五;来源本人截图

读者可以自行按上面的规则继续添加“+、-、×、÷、=”和“清除”按钮,我下面就直接给出代码了:

#-*-coding:utf-8 -*-
from Tkinter import *

def add():
    return 
root=Tk()
root.title('计算器')

e=Entry(root,width=64)
e.grid(row=0,column=0,columnspan=4)

#设置按键
btn7=Button(root,text='7',width=16,command=add)
btn8=Button(root,text='8',width=16,command=add)
btn9=Button(root,text='9',width=16,command=add)
btn4=Button(root,text='4',width=16,command=add)
btn5=Button(root,text='5',width=16,command=add)
btn6=Button(root,text='6',width=16,command=add)
btn1=Button(root,text='1',width=16,command=add)
btn2=Button(root,text='2',width=16,command=add)
btn3=Button(root,text='3',width=16,command=add)
btn_add=Button(root,text='+',width=16,command=add)
btn_sub=Button(root,text='-',width=16,command=add)
btn_product=Button(root,text='×',width=16,command=add)
btn_divide=Button(root,text='÷',width=16,command=add)
btn_equal=Button(root,text='=',width=16,command=add)
btn_clear=Button(root,text='清除',width=32,command=add)

btn7.grid(row=1,column=0)
btn8.grid(row=1,column=1)
btn9.grid(row=1,column=2)
btn4.grid(row=2,column=0)
btn5.grid(row=2,column=1)
btn6.grid(row=2,column=2)
btn1.grid(row=3,column=0)
btn2.grid(row=3,column=1)
btn3.grid(row=3,column=2)
btn_add.grid(row=1,column=3)
btn_sub.grid(row=2,column=3)
btn_product.grid(row=3,column=3)
btn_divide.grid(row=4,column=3)
btn_equal.grid(row=4,column=2)
btn_clear.grid(row=4,column=0,columnspan=2)
root.mainloop()

运行上面的程序,可以看到一个简单的计算器界面就编写好了,是不是很简单?
Image 6.jpg
图六;来源:本人截图

今天就讲到这里,下次我们再来学习Tkinter部件的功能,以及如何编写函数实现计算器的功能。


参考资料:

Sort:  

!thumbup
恭喜你!您的这篇文章入选 @justyy 今日 (2019-12-01) 榜单 【优秀的文章】, 回复本条评论24小时内领赏,点赞本评论将支持 @dailychina 并增加将来您的奖赏。
@justyy 是CN区的见证人,请支持他,给他投票,或者设置justyy为见证人代理。感谢!@justyy的主要贡献:https://steemyy.com

Congratulations! This post has been selected by @justyy as today's (2019-12-01) 【Good Posts】, Steem On! Reply to this message in 24 hours to get rewards. Upvote this comment to support the @dailychina and increase your future rewards! ^_^

SteemIt 工具、API接口、机器人和教程
SteemIt Tools, Bots, APIs and Tutorial



If you believe what I am doing, please consider a spare vote voting me here, thank you very much indeed.

@justyy - the author of https://SteemYY.com and I have been a Steem Witness for more than a year now.

感谢代理101.31SP 给team-cn! 由于你使用CN作为你的首标签,额外获得2%点赞! 你的帖子获得team-cn 10% 点赞!(如果不想看到这个回复,请回复“取消”)

JCAR 11월 구독보팅입니다.
어느새 11월 마지막주가 되었네요. 즐거운 한 주 되시기바랍니다.



This post has been voted on by the SteemSTEM curation team and voting trail. It is elligible for support from @curie and @minnowbooster.

If you appreciate the work we are doing, then consider supporting our witness @stem.witness. Additional witness support to the curie witness would be appreciated as well.

For additional information please join us on the SteemSTEM discord and to get to know the rest of the community!

Please consider using the steemstem.io app and/or including @steemstem in the list of beneficiaries of this post. This could yield a stronger support from SteemSTEM.

 2 years ago Reveal Comment