tkinter可视化编辑器教程

接下来给大家带来关于计算器的一个布局，我们先来看一下整体的效果，当我们运行这个计算器之后的话，他会弹出这一个程序，在这个地方我们可以去点击八和九，然后我们去加上一个六，等于啊 九十五，然后你可以继续去加，然后继续去减，然后可以进行一个啊计算吧，最终算出这些结果。然后我们来做一下整体的一个布局，首先把这个内容给他截取出来啊，那么我们给他关闭一下，然后我们要做的是计算器的布局，计算器布局， 嗯，计算器布局，首先的话，我们需要一个窗体，所以我们是 input， 这一个 tk 应特矮字为 tk 啊，那么我们 rutrut 等于一个 tk 点上一个 tk， 然后加上一个括号，然后 rut 点上一个 jm 曲 啊，在这个地方我们设置一个窗口，整个窗口的话大概是一个三百，三百乘三百的，但我们在这个地方的话是里面会去调他的一个 啊，编剧，所以我们要调整一下这个地方是一个二百九十五乘上一个二八零的一个大小，然后去加上一个一百，加上一个一百啊，那么我们整个的一个标题入特点上一个开头，然后是一个简易计算器，简易计算器，简易计算器， 好了，我们再给他一个入特点上一个门路破呃，给他运行看一下，首先整体的一个窗口，给他运行一下这个窗口是没有问题的，对吧？ 啊？但是我们这个窗口刚刚我们在弄的时候，其实他是一个半透明的一个状态啊，并不是说我们直接一跑出来之后，他就得到了我们想要的一个结果，所以我们还需要去调整一下整体的 一个窗口，你看这个窗口，他是一个半透明的这个计算器啊，他还能透透穿出去，所以我们要半透明的话需要去设置一下这一个 hippos 的一个属性，如果想要设置他的一个背景，就用这个白壳 ground 的， 嗯，在这个地方我居然看到的，就不手动去敲的吧，直接粘贴过来，是一个固定的，就是设置一下啊，不透明度零零九，然后这是他的一个背景，为一个 f f 的一个颜色啊。之后这个地方我们做好之后来布局下面的一些内容， 哎，下面的话整体首先是上面这一个，对吧？上面这个地方应该是我们的一个 labor 显示最新的这一个状态， 其实这个内部的话，他的一个属性是会发生改变的，所以我们去给他一个瑞兆特啊，瑞兆特兰博，然后等于一个 tk 上一个死角瓦，嗯，死角瓦这一个是一个可变的，可变的，我们就 瑞加奥特点上一个兰博，点上一个 c 特，我们默认给他设置为一个零，好吧，呃，那么我们来了，在这个地方的话，我们是一个 tk 点上一个雷宝，这个雷宝的话我们布局在入特对象上面，去 啊，之后他的一个文字是 tax one new a 宝的一个属性， tax one new a 宝没有，我们点进去啊，在这个地方的话复制一下啊， 他可是完牛一宝，他的一个可变面料绑定的话是这一个瑞兆的 anu 啊，之后在这个地方我们去给他的一个啊，宽高大小的话，等一下还要跨行以及跨列，这个地方我暂时就先不做了，好吧？我们在这个地方直接给他布局一下啊。 嗯，整体的布局的话，我们在这个地方需要用的一个个的网格布局啊，这个网格布局的话，它是分为几行几列的，在这个网格布局里面我们直接给他一个 row 肉的话，我们等于 一个一啊，然后它的一个可能是由 l u m n 啊，可能是由 l u m n 啊，可能我们也等于一个一，第一行第一列，那么我们 来运行看一下，在这个地方的话有一些属性，我们等一下需要做一个调整啊，包括他的一个字体太小的，对吧？这个字体的话我们可以去给他改一下，在这个地方我们可以加一个放特， 放头的话我们等于一个宋体吧，宋体，宋体。然后给他一个二十号的一个啊，字体的一个大小啊，因为这个放头我们在后面会很多地方都会用到他，所以我们给他定义成一个变量，好吧？定义成一个变量后面用起来会方便一下，所以是一个放头啊，放头等于一个放头就好了 啊，那么是一个字体之后他的一个对齐方式的话，对齐方式后面来调吧，那么第一个我们应该是做好了，嗯 的话做好的，那么我们先把下面做做完，然后再处理上面的。上面这个地方高度应该是给一个 hat， 我们给他一个奥啊， hat 等于一个奥，应该是占两行的一个高度才对。 运行看一下，在这个地方啊，两行的高度够了吧？等一下再调整他的一些信息啊，那么我们先来看一下第一行啊，第一行我们需要把这一行做出来，对吧？这一行的话我们大概是四个按钮，以及四个按钮里面会有他们自己的一个样式啊，那么我们先来第一个吧，第一个是一个煲汤可料， 这一个是清空，当我们点击清空的时候，可以把里面的东西全部给他去掉啊，那么是等于一个 tk 点上一个 bot， bot 布局的话应该是入他对象上面去。呃，之后我们给他的一个文本应该是等于一个 c， 对吧？等于一个 c， 之后他的一个宽度位置的话，我们等于一个 在这个地方位置等于一个五啊，之后这个地方给他一个放特，这个放特的话不与放特相同吧？上面是一个二十，下面放特我们给他改小一点，放特一十六吧。 呃，一十六的一个字体，那么我们给他一个放他一十六，在这个地方是给他的一个字体啊，之后他对齐的一个样式。瑞瑞福啊，瑞瑞福的话我们等于一个 tk， 点上一个 tk， 点上一个福辣条。

好，今天我们来说一下最后一个，记住空间包臀按钮，按钮呢，可以，上面可以放上文本或者图像。按钮可以用于监听用户行为。 按钮能够，最重要是按钮能与一个拍摄的函数关联，当按钮被按下时，自动调用该函数。 用户跟界面主要的交互，一个是输入框划快，在某某种意义上也是你自己玩游戏除了发语音打字之外，不就是按钮按来按去。好，我们通过一个例子来练习一下按钮，来说一下按钮，按钮呢 的语法。一样的啊，跟那个 labor 啊， n 圈都是一样的啊，先新建一个按钮啊， 然后我们按钮上面的文字啊， tax， 默认来说，他会根据你的文字大小来改变他的按钮大小， 我是一个小艾，然后呢，我们给他一个东西，给他，给他一个什么，就比如说我们下面给一个内部啊，内部呢，我们也给他一个那个文字福串避难对象啊，当做他的内容 测试表情可以了啊。然后呢，按钮呢，我们首先说一个，嗯，我们来说几个， 我们来说几个他独有的属性。第一个呢是 state， 当然这个和 state 好像跟那个 n 球是一样的啊。状态一般有三种状态，默认为 normal， 那里面可以有图片 image。 当鼠标放上去的时候，这个按钮以后有一个前景色和背景色， active back， wrong 和 xe， 一个是按钮放上去的背景色，一个是按钮放上去的前景色。 好，如果我们说想要一个姨妹子呢，我们首先要有一个姨妹子对象，你对象呢？这背面有一个风头姨妹子啊，这，我们已经有一个，我放了一个图片放着啊像像一个这个地球一样 个萝卜平衡起来在这里呢指定这个图片 嗯就可以了啊运行一下但是这时候会发现什么问题呢原先这个我是一个小按钮这个东西没有了对吧。就这个图片呢就不能跟这个文字 并存如果说你想要图片跟文字并存呢你就必须让人再加一个属性叫康胖子。 康胖的有哪几个属性。就是说这两个图片在文字的什么地方啊。上下左右 your left top right bottom center。 啊比我们以这个 top 啊来试一下这个图片在上面文字在下面可以了啊我们来试下。心疼我看心疼会是什么样子 而我的中间会怎么样覆盖掉吗。对会覆盖。嗯对图片文字会在一起你会仔细去理解了。这个代表附加图片的位置啊。第一个 但这个我们就暂时需要啊我们继续往下研究啊。 state stead 等于 k 点 nomer 这个是默认的嘛咱们就应该是那样的我们来试一下这个题 活动会怎么样。应该也能用吧也能用 dc 包肯定不能用不能用的 dc 包肯定不能用。 好我们来设置一下 active background 按钮放上去的背景色设置为蓝色试一下按钮放上去的背景 没有反应哦 按下去了 这是按下去的颜色。应该说是按下去不应该是放上去啊那这是不是应该是按钮按下去的前景色按下去按下去 啊。把这个我们再设一个前景色 现在再说一个红色吧 一个是背景字一个是前景字哎是的啊对吧可以了然后按钮的 交互事件就是可以绑定一个函数，用 come 的 come 的来绑定一个函数，这要直写函数谜，这么之前先把函数写好，这个 f， 这个比如说踏棋，踏棋现在可以写到空运之家站位，站着 让别人 print 啊，一下，刚这个拿到这个东西 s， 这就是绑定一个很简单的事件啊，然后他也可以绑定一个字母函数。 好，除了这个之外呢， come on 的还可以念接一个人体民函数，人体民函数可以去传参数，也可以去做一些 比较。呃，就正常这个函数做不到的事啊，我们举个例子，怎么做呢？我们想要把它本身的这个按钮有一个需求，叫做把本身按钮上这个 taste text 了，可以打印出来后传出去。首先呢，我们给他一个，先给个变量吧，假设有个变量变量叫做真人 tex 啊，我们就等于这个，我是一个小按钮，现在他这个参数，他这个，他这个变量嘛，我们把这个变量给他传出去啊。首先呢，我们得到这个太克斯肯定是用这个变量啊，扛不了，这，这个可以写，扛不了，那么那么的那么的 t t 等于六个 btn test。 然后干嘛呢？首先要如果简单一点，不用追这个，直接在这就可以， 这个气就可以了，试一下啊，我这个小按钮按一下，我可以打印出来，对吧？那有人说我们兰博的不这样，可不可以？我直接兰博的冒冒号，然后不认得就提升 tex， 可不可以？那你可以试一下，对吧？ 当然也可能也是可以的，但是我不是很坚强，你要在外面给他包装一下 这第一种，第二种把这个参数给传出去，传出去也简单，就这种塔子，这种塔子来传，这上面有一个东西啊，我们把这个结果是 今天，我是啊，加上一个穿过这个 n， 你可以试一下啊， 结果说我是个小按钮，这，这也是一个比较常见的就通过匿名函数来传餐的一种方式。

可以看一下今天这个视频，他是做什么的？首先的话我们来运行一下， 运行一下啊，当我们启动这个程序之后的话，首先是一个登录页面吧，登录页面肯定要输入账号密码，在这个地方的话我们可以使用 啊 idmi 去进行一个登录，然后密码是一二三四五六啊。首先 idmi 里面我们加一个一看一下他用户名，这个地方查询的时候用户名不存在啊。然后我们点击个确定，以及我们可以去输入一个密码，比如说用密码给错一个，他也是一个错误的 啊。这个地方的话我们是给一个用户名以及密码啊，以及我们还可以用第二个用户，比如说正心。然后在这个地方我们给一二三四五六登录啊，这个地方是用正心去进行一个登录的，也就是我们整个登录的话，他可以实现一个多用户进行一个登录啊，那么 在登录之后的话会进入到第二个页面，页面的话会有这一些录录啊，查询啊、删除啊、修改，以及关于关于的话是一些个人的一些版权信息。

啊，看一下我们这一个文本框里面去做的什么吧，我们首先的话是创建的这么一个文本框吧，啊，创建的这么一个文本框，然后里面的话，我们我们就给他设绑定的几个方法，第一个的话，我们绑定的这个获取数据，插入数据，删除删除 删除数据以及获取光标所在的一个位置。我们先来看第一个吧，获取光标所在的一个位置，比如说我光标点在这一个 hello word 这个地方，对不对？我们点击一下获取这一个光标位置，那么它打印的是这一个 instet。 啊，我们光标的话就是当前是在 inset， 这一个，就是在刚刚的那一个位置吧，这个地方， 这个的话是 tax 的点上一个 coser， 呃，这一个的话是打印我们光标所在的一个位置吧，打印这一个插入的这一个位置，光标就是 insert 的这一个位置啊，然后我们给它插入数据吧，我们 看一下，如果我点击这一个获取数据啊，他会打印我们所有的一个文字，这个获取数数据的话，我们是这一个 get tax 的啊，在这里面的话我们不能绑定，所以他使用的是这一个 tax 的，是这个的话是我们的一个文本框对象。 t x t 啊，是文本框对象对象啊，这个文本框对象的话就是我们整个界面，然后在这里面的话我们是得到它的一个文字，这里面的话我把这个界面设置大一点，好吧，太小了，不太好看， 这个地方我们是复制一下，调整一下它的一个大小，放在 t p l 全部给它调整一下 好了，这样重启一下 啊，像这样的话我们就可以获取里面的一个数据，刚刚获取的话我们是直接得到里面的一个文字啊，在这个地方获取的时候的话，我们是在这里面我们第一个的话是零零零，这个零零零的话代表的一个意思是什么啊？就是地银行地，从地银行 零好第零个开始啊，第开始啊，第二个的话是我们 t k 点上一个摁的， t k 点上一个摁的的话是到最后就是整个文本框最后，最后啊，比如说我也可以 给定零行到定零个的话，我们这个地方还可以给这个地方我们给一个零点啊，零点二吧，就是我们提取两个内容，这个地方最好的话是给一个字符串吧，就我们可以给数字，也可以给字符串啊，但是如果你啊最好的话是给字符串，因为给数字的话，可能 啊，可能会有些东西表表表示不出来吧，我们再来运行一下，如果我给零到二，我们再来看一下啊，我们来获取这一个数据啊，这里面我们获取的话就只能获取到我们啊，前面这个地方我们是获取数据插入数据 打印的是一个空的，我们给一个零点零好，这里面我们应该是第一行第一行第一行第二个， 第一行第二个的一个数据插队啊，第一行第二个的话，我们能得到这一个 h e 的这一个内容，第一行第二个，所以他是得到的是两个啊，最好的话我们是给一个 tk 点上一个摁的，直接获取到最后的一个内容 地方，我们给一个 tk 啊， tk 点上这一个摁的，摁的的话是获取到最后的一个元素啊。第二个的话是我们插入，像这个插入的话也是两个参数，第一个是我们插入的一个啊位置，第二个插入的一个内容，这个位置的话你也可以存 传入我们第几行第几个内容？比如说我给一个啊，一点一点二这里面我们去会插入两行一点二里面的话，我给一个啊，直接给改成一个正心吧， 真心啊。然后我们启动一下这个地方，我们重新运行一下啊，在这个地方的话，我们点击一个插入数据，那么他会插入两个，第一个的话他会在最后面给他插入一行， hello， word 啊。第二个的话他会在第一行第二个的一个位置开始插入插入正心这一个内容，也就是这一个正心 啊，然后还有一个删除，删除的话也是指定两个位置，第一个位置其实是在哪个地方？第一行定零个，然后第一行最后一个啊，点上一个摁的 就行了，摁的是表示最后一个啊，那么这个的话是我们，是我们打印这一个吧，就是操作这里面的一个文本信息。

就在这个地方我们给他一个边框，边框的话我们给他一个 bd， bd 的话等于一个一，嗯， bd 等于一个一，以及他默认的一个样式。 are you relief？ relief 的话我们给他一个 tk 点上一个上卡在这个地方。是 啊，是这一个特殊的一个样式，在这个地方的话，我们是下面这一个特殊的样式给他沉下去，所以是一个 tk 点上一个上课 周，他对齐方式的话，我们直接给他居中对齐，就选了安考 mc 九啊，安考直接等于一个 tk 点上一个生巧， tk 点上一个生肖，最终的话我们给他帕克一下，追帕克一下之后的话，我们给他一个飞啊，飞啊，等于一个 tk 点上一个 x， 就是 x 方向去进行一个填充啊，他才能形成啊。我们所看到的一个样式，我们可以看一下，像这个地方的话， 他是整个就形成这样的一个样式啊，这个地方是有一条线的，嗯，在这个地方的话就是第 一个这一个雷波吧，那么雷波做好之后的话，我们接下来是两个按钮的，在这个地方我们看一下这两个按钮啊，这个按两个按钮的话有一点点特殊啊，因为他是两个按钮显示在一行里面，而且是居中显示的，所以在这个地方必须给一个布局组建，所以我们可以去 创建一个。在这个地方的话，我们给他一个包吞夫人，夫人，然后直接等于一个 tk 点上一个夫人，夫人布局的话是一个入他对象上面， 如果默认的话，我们直接给他一个 bottlefront， 点上一个 part 给他布局就行了，之后在这个布局组建里面的话，我们容纳了两个按钮，一个是上页，一个是下一页，所以我们给他一个 pievpiev， 然后给他一个 photo， photo 啊 photo， 然后直接是等于我们的一个 tk 点上一个 bot， bot 的话布局到 root 对象上面去，然后是一个 tax， tax 的话等于一个上一页上一页，然后还有一个的话是一个 nice， 这个地方是一个下一页， 在这个地方是下一页，下一页啊，上一页下一页，之后把这两个按钮都给他布局一下，所以我们给他布局这个，给他一个 park 一下，之后这两个布局的话是布局在这个 bottom free 里面，他才可以显示到中间去。 之后在这个地方我们给他一个 c 的 c 的的一个方向的话，我们给他一个 tk， 点上一个 let， 一左一右，在这个地方的话，嗯，一左一右，然后是一个 rat， 在这个地方之后之后再去调一下他的一个方位，安考 c h o r， 然后等于一个 t k 点上一个申请啊，这个地方我们要显示在中间的这一个位置，然后我们给他刷新看一下啊， 刷新一下，刷新一下之后我们就显示过来了，像这个窗口就显示过来了，然后这个地方上一页，下一页，对吧？啊？然后窗口的一个整体的大小的话，我们其实可以参照这一个，这一个是我们实际运行出来的这么一个窗口。那么我们可以来看一下 啊，他整体的一个大小的话，刚刚是一个九百多，在这个地方的话呢，是一个九零六和一六八七，对吧？我们可以改一下我们窗口的一个大小，九零六和六八七，在这个地方的话是一个九零六和一个 六八七，然后重新刷新一下，在这个地方大致就是这个样子的吧？那么我们这个就出来了。但是现在的话点击没有内容，那么接下来我们准备来写他的一个逻辑。

可以自己调颜色，好，比如说我们现在这个地方的间距不是要调大一点吗？间距调大有几种方法，要么就把按钮缩小一点，那比如说这个地方我们把按钮缩小一点，好，这个地方我们把它缩小一点， 变窄一点，是吧？那变窄一点的话，我们把这三个都变成一样窄，那我们就可以这样子一二三， 看到没有？好，我们把这种跟他一样的都变窄一点，你像这样自由的调整的话，在 ai 里面是不太可能的， 那么这个只有设计器有这种效果，是不是？你看这个地方再微调一下，给他对齐，好，这个时候我们再来一来，这就是一种真正的 能够随自己意的这么一个调整方式。颜色转设计器右键最下面一个 p y 窗体代码， p y 窗体代码转 x m l， 这个必须装了，我们的 p s 八八零这个插件，也就是我的郑广学 开始中文编程助手这个里面的一个功能，其中一个功能叫做七 y 八八零创意设计器右键这里。好，现在你说，你说，你嫌刚才这个太小了点，是吧？那我们又再调一下，那我们把这个稍微再调大一点，好，再次选中这里所有的按钮， ok， 你看我们现在又把它变大了，好，把这个地方调大一点不是？好，我们刚才说了要变几个花一点的颜色，是不是？好？这个时候颜色可以随便调，你看我们现在调一个青色，好，我们第一排调成这个青色的，我们都用青色换一下，第二排调个红色， 第三排调一个深色，你像这种你用 ai 去描述，你想达到随心所欲的效果，它是比较麻烦的，那我们现在用这个格式化编辑器，它就比较简单， 那么那边显示，但是现在展示我还不支持这个设定边框，到时候在里面去设一下。 ok， 好 了我们 再预览一下设计器。不不打包，打包是 vs 壳的人，你一看就没有学过拍摄吗？打包是在我们的编辑器里面有打包脚本，去打包设计器只负责床底部分，我的设计器只负责床底部分，因为所有其他的功能都用我们的 vs 壳的。或者是去这种编辑器更简单，用打包脚本我们可以随时让 ai 帮我们去改。 而这个生态我不去做，他有那种开发工具，做设计器的是带打包，其实那种打包其实他是有很多问题的，因为他不兼容我们这种，比如说你想现在用 ai 去写这个代码，接着写他就写不了，他的语法什么的都不一样， 像我们这个生存的代码就是纯粹的平使用的拍摄代码一样的，线上录播课，一线视频直接学习。你看我们又来一下。

ai 编程助手 curser 又放大招了，以前用 qt 快 捷的 ui 设计器，觉得那种所见即所得的体验特别好用，拖在元素调整属性，改完直接生成代码。 但外部开发一直没有那么顺手的工具，改个网页得在浏览器和代码编辑器之间来回切换。现在 curser 终于把这种体验带到了前端开发， 刻在内置的 browser 有 了可识法编辑器直接在内置浏览器里面啊，拖出来元素调整布局，点击组建，修改参数，用滑块和调色板实时地调整颜色间距和字体大小。 更厉害的是啊，你可以直接点选某个元素，告诉 ai 把这个变大一点，把这个改成红色，交换它们的顺序， 几秒钟就能看到结果。改完满意了，你再让 agent 帮你把改动应用到代码里面设计和开发，我们终于可以在同一个窗口里完成了。刻在 browser 的 可缩变镜器啊，让前端也有了所见即所得的体验，记得关注再走哦！