前端挑战:Tkinter布局与设计【三种布局】
usp1994 2024-07-13 14:33:01 阅读 88
前端挑战:Tkinter布局与设计【三种布局】
文章目录
前端挑战:Tkinter布局与设计【三种布局】
前言
Frame 窗口组件
代码
效果
Tkinter的布局
grid 网格布局
效果展示:
代码讲解
pack 布局
基本使用
左右布局
place 布局
代码
预览
前言
作为一个前端开发,习惯性的用HTML去解决客户端的问题。然而在开发PC客户端的时候,electron 打包太大了,有时候只是简单实现一个PC小工具,就要装一个浏览器内核进去,有点太舞刀弄枪了,而且运行起来内存也超大。
遂学习 python 内置的 <code>tkinter 来做一些小工具。市面上很多教程都是讲组件,个人认为那些只是用到的时候才会查的一些文档,没有什么思考的地方。学过css + html 的都知道,标签什么的都是用到才学,最开始的思路都是布局,页面设计实现。所以写一篇博客,来专门测试、讲解布局。
Frame 窗口组件
本文主要讲的是布局,所以就单纯的使用 Frame 窗口组件来布局。Frame其实是一个容器,用HTML来理解,就是一个 div 标签。里面可以嵌套 Frame 。
代码
import tkinter as tk # 导入Tkinter模块,用于创建图形用户界面
# 实例化Tk对象,创建主窗口
window = tk.Tk()
# 设置窗口的标题
window.title('My Window')
# 设置窗口的初始大小(宽度x高度)
window.geometry('500x300')
# 创建一个Frame,它将作为主窗口内的一个容器
frame = tk.Frame(window , bg='lightblue')code>
# 将Frame添加到主窗口中
frame.pack(expand=True, fill='both')code>
# 进入Tkinter的事件循环,等待用户操作
window.mainloop()
效果
Tkinter的布局
组件的三种布局有三种方式 <code>grid 、pack
、 place
。这三种方式可以单独使用也可以,同时使用。去完成一些左右布局,上下布局,圣杯布局,表单布局等等。
grid 网格布局
grid 是网格的意思,这种布局方案是将窗口划分为一个个网格。
import tkinter as tk # 导入Tkinter模块,用于创建图形用户界面
# 实例化Tk对象,创建主窗口
window = tk.Tk()
# 设置窗口的标题
window.title('简单布局')
# 设置窗口的初始大小(宽度x高度)
window.geometry('500x300'
上一篇: asp.net core webapi接收application/x-www-form-urlencoded和form-data参数
下一篇: 前端尚品汇(四)———函数防抖及节流
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。