[Tkinter 101] 08 Tkinter布局管理

kyranhan

已于 2023-08-11 14:57:01 修改

阅读量42

点赞数

分类专栏： Tkinter 101 文章标签： python

于 2023-08-11 11:07:03 首次发布

本文链接：https://blog.csdn.net/kyranhan/article/details/132212541

版权

Tkinter 101 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

想做一个二维码小工具，UI设计为上下两个部分。上部分文字转图片，下部分图片转文字。学习使用tkinter的布局管理。

先弄两个色块占位

        # convert text to image
        tk.Frame(self, bg="green").pack(side=TOP, fill=BOTH, expand=True)
        # convert image to text
        tk.Frame(self, bg="blue").pack(side=TOP, fill=BOTH, expand=True)

细化一下UI，加几个占位块。代码中，控件都以左上角作为锚点来定位。


        # convert text to image
        text2ImageFrame = tk.Frame(self, bg="green")
        text2ImageFrame.pack(side=TOP, fill=BOTH, expand=True)

        leftArea = tk.Frame(text2ImageFrame, bg="yellow")
        leftArea.place(anchor=NW, relwidth=0.4, relheight=1)
        midArea = tk.Frame(text2ImageFrame, bg="orange")
        midArea.place(anchor=NW, relwidth=0.2, relheight=1, relx=0.4)
        rightArea = tk.Frame(text2ImageFrame, bg="red")
        rightArea.place(anchor=NW, relwidth=0.4, relheight=1, relx=0.6)

        # convert image to text
        tk.Frame(self, bg="blue").pack(side=TOP, fill=BOTH, expand=True)

继续加一些控件


        # convert text to image
        text2ImageFrame = tk.Frame(self)
        text2ImageFrame.pack(side=tk.TOP, fill=tk.BOTH, expand=True)
        leftArea = tk.Frame(text2ImageFrame)
        leftArea.place(anchor=tk.NW, relwidth=0.4, relheight=1)
        midArea = tk.Frame(text2ImageFrame, bg="orange")
        midArea.place(anchor=tk.NW, relwidth=0.2, relheight=1, relx=0.4)
        rightArea = tk.Frame(text2ImageFrame)
        rightArea.place(anchor=tk.NW, relwidth=0.4, relheight=1, relx=0.6)

        # text2ImageFrame -> leftArea
        tk.Label(leftArea, text=self.loc_helper.get_string("INPUT_TEXT")).pack(side=tk.TOP, anchor=tk.W)
        input_text = tk.Text(leftArea)
        input_text.pack(side=tk.TOP)

        # text2ImageFrame -> rightArea
        default_qr_image = Image.open(os.path.join(os.getcwd(), "dirname", "xxx.png"))
        default_qr_photo_image = ImageTk.PhotoImage(default_qr_image)
        default_qr_image_label = tk.Label(rightArea, image=default_qr_photo_image)
        default_qr_image_label.photo_image = default_qr_photo_image # avoid garbage collection
        default_qr_image_label.pack(fill=tk.BOTH, expand=True)

        # convert image to text
        tk.Frame(self, bg="blue").pack(side=tk.TOP, fill=tk.BOTH, expand=True)