前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >最简单的方式构建 Tkinter 图形界面

最简单的方式构建 Tkinter 图形界面

作者头像
somenzz
发布2021-07-01 16:32:13
3.7K0
发布2021-07-01 16:32:13
举报
文章被收录于专栏:Python七号Python七号

大家好,我是征哥,今天分享如何用最简单的方式,为你的 Python 程序穿上漂亮的衣服,行话是用 Python 构建漂亮的 GUI,GUI 就是 graphical user interface 的简称。

为什么要图形界面呢?

前文最简单的方式发布你的Python应用中提到,程序员写的软件,最好给不懂技术的人使用,才更有价值,我们平时写的 Python 程序,都是在一个叫作终端的黑窗口里运行的,自己用当然没问题,给别人用,尤其是不懂技术的人,大都不怎么会操作那个黑窗口,因此,很有必要为我们的程序穿上漂亮的衣服-图形界面。

程序有了有图形界面,顿时显得高大上,可以对别人说我写了个小软件了。从程序到软件的过程看似只加了个图形界面,实际上这一过程并不简单,你需要学习各种的图形界面库,控件,事件,多线程等复杂的知识,还要学习如何设计,让界面更美观漂亮。

那么有没有简单一点的方法呢?

如果没有,就不会有今天的文章了。

总的来说,分三步:

第一步:设计界面。

在 Figma 网站上通过拖拉拽的方式设计好图形界面,不想自己设计也行,有别人设计好的,你可以直接使用,有些免费,有些付费。

第二步:自动生成界面对应的代码。

设计好后,复制对应的网址,然后用 Python 程序 Tkinter Designer 自动生成你设计好的界面的 Tkinter 代码(标准库 Tkinter 是最受欢迎的图形界面库之一)。

第三步:修改代码,添加业务逻辑。

图形界面的代码生成好了,接下来就是修改代码,为一些按钮,输入框添加业务逻辑代码。

好了,现在你可能有些疑问,啥是 Figma,Tkinter Designer 又是什么工具,怎么用的,现在我来一一解答。

什么是 Figma?

Figma 是一个基于浏览器的协作式 UI 设计工具,Figma 从推出至今越来越受到 UI 设计师的青睐,如今也有很多的设计团队投入了Figma 的怀抱。

简单来说,设计师(美工)设计好原型,交给程序员去开发,程序员根据窗口大小、位置、颜色、按钮等在一行一行编写代码,作为程序员,有没有好累的感觉。

那么 Figma 设计一个界面难么?

我觉得不难,至少比在线 PhotoShop 要简单,因为弄几个输入框,文本和按钮就可以设计一个程序的界面,基本都是拖拉拽。如果要专业而美观的设计,那就需要系统的学习了,不想学习也行,拿别人设计好的自己改改就可以了。

Tkinter Designer 是什么工具?

Tkinter Designer 就是将 Figma 设计的界面自动转换成代码的开源工具。最近更新日期是 6 天前,目前 GitHub 上有 1800+ 星,是个很热门的项目,我在使用的过程中遇到了点小问题,提交了 ISSUE,作者不到一分钟就回复了,非常积极和热情。

如何使用 Tkinter Designer?

接下来是保姆级别的教程。

下载

安装 TkInter Designer 是一个相当简单的过程,您所要做的就是克隆 Github 存储库:

代码语言:javascript
复制
git clone https://github.com/ParthJadhav/Tkinter-Designer

将目录更改为该文件夹:

代码语言:javascript
复制
cd Tkinter-Designer
安装依赖
代码语言:javascript
复制
pip3 install -r requirements.txt
执行
代码语言:javascript
复制
python3 tkinter_designer.py

执行上述脚本后,你将看到一个漂亮的 GUI 界面:

注册 Figma,并设计一个界面

1、注册并登录。

打开 https://www.figma.com,点击 Sign up 进行注册。

你可以使用 Google 账户直接登录。

2、获取 Token。

Token 就是 访问 Figma API 的凭证,你只有一次机会看到它,看到时就复制并保存下来。

点击右上角账户名称那里,再点击 setting:

找到 Personal access tokens,在下方的输入框里面填写 Personal access tokens 的标识符,可以随意填写:

写完直接按回车就可以看到一个类似这样的 token,把它复制保存起来

代码语言:javascript
复制
196344-282fd2ea-***********-aad25a0f8cfe

3、设计一个界面:

登录后,您要单击右上角的 New 并创建一个新的设计文件:

image.png

只需要 3 秒就可以设计一个自己需要的界面:

image.png

设计的细节这里不再赘述,可以参考 Figma 的官方文档,这里直接给一个我弄好的作为 demo:

该设计的链接:

https://www.figma.com/file/xNPw6pdKst9ONDn43crtVn/v1-Fixed-Community?node-id=1%3A416

直接打开这个链接就可以看到 UI 界面,可以修改后保存为自己的界面。这里说下如何获取界面的链接,点击 Share -> copy link,如下图

基本流程就是选择一个 Frame,在上面拖拉一些图片,文本,矩形框,配置颜色,矩形框可以设计成文本输入框,也可以做成按钮,非常灵活。

需要注意的是,元素的命名是有要求的,如果是文本输入框,命名必须是 TextBox,如果是按钮,必须是 Button,除 Text 类型外,其他元素的名称必须为以下 5 种:

生成代码
代码语言:javascript
复制
python3 tkinter_designer.py

执行上述脚本后,你将看到一个漂亮的 GUI 界面:

这里我们输入前面获取到的 Token ID, File URL, 选择代码的保存路径,点击 Generate:

然后查看生成的目录:

代码和图片已经生成好了,执行:

代码语言:javascript
复制
python window.py

会看到我们设计好的界面已经出来了,文本框可以输入文本,按钮的点击函数也做好了:

接下来就是修改 window.py 文件,来实现自己的业务逻辑了。

最后的话

本文分享了一个简单的设计软件界面的方法,借助于 Tkinter Designer 工具将 Figma 的设计文件直接转换成代码,非常省时省力,提升效率,准备 GUI 编程的朋友们可以尝试一下。

如有问题,欢迎留言讨论

PS:公众号底部菜单-我->我的留言,点击可以跳转,点击蓝色文章标题,可以跳转文章,从而找到自己留过言的文章。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-06-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Python七号 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是 Figma?
  • Tkinter Designer 是什么工具?
  • 如何使用 Tkinter Designer?
    • 下载
      • 安装依赖
        • 执行
          • 注册 Figma,并设计一个界面
            • 生成代码
            • 最后的话
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档