用Tkinter打造GUI開發工具（29）可視化設計之Pack佈局及生成代碼

用Tkinter打造GUI開發工具（29）可視化設計之Pack佈局及生成代碼

前面我們介紹了Tkinter的2個佈局方法的可視化設計,這2個方法是Place和Grid佈局。這篇介紹Pack佈局的可視化設計程。
我們仍然要依賴HP_tk2來實現設個設計程序。

# Tkinter GUI可視化生成代碼驗證程序.
import tkinter as tk
import tkinter as ttk
import tkinter.tix as tix 
from tkinter.constants import *
import PIL
import random
import time
import HP_tk2 as htk
import HP_global as g 
if __name__ == '__main__':
    root = tix.Tk()   #主窗口root
    root.title("可視化設計Pack")
    f0=tk.Toplevel(root)  #可視化子窗
    f0.title('Pack佈局設計')  #Tkinter中設置窗口標題方法
    top=htk.resizewidget(f0,400,400)  #建立可調部件區域
    f1=tk.Frame(top)
    f1.place(x=0, y=0,  #座標起點(0,0)
                    width=300, #部件相對於窗口的寬度
                    height=300, #部件相對於窗口的高度
                    bordermode=tk.OUTSIDE  #部件邊框模式
                    )  #使用place方法的相對位置
    top.setwidget(f1)  #加入可調部件
#下面放4個按鈕控件，調整位置。
    pck=htk.packwidget(f1)
    b1=tk.Button(pck,text='控件1')
    pck.setwidget(b1)

    b2=tk.Button(pck,text='控件2')
    pck.setwidget(b2)

    b3=tk.Button(pck,text='控件3')
    pck.setwidget(b3)

    b4=tk.Button(pck,text='控件4')
    pck.setwidget(b4)
    
    def btn_cmd():
        pck.get_anchor()

    def btn_cmd2():
        pck.get_side()

    def btn_cmd3():
        pck.get_fill()

    def btn_cmd4():
        py=pck.to_py() 
        print(py)
      
    btn=tk.Button(root,text='設置anchor工具',command=btn_cmd)
    btn.place(x=10,y=10)

    btn3=tk.Button(root,text='設置side工具',command=btn_cmd2)
    btn3.place(x=10,y=50)

    btn4=tk.Button(root,text='設置fill工具',command=btn_cmd3)
    btn4.place(x=10,y=90)    
    
    btn5=tk.Button(root,text='生成代碼',command=btn_cmd4)
    btn5.place(x=10,y=130)  
    root.mainloop()

程序運行結果如下圖。

我們打開佈局調整工具，對佈局進行設計，最終設計佈局如下圖。

點按鈕[生成代碼]，獲得如下程序。

import tkinter as tk
import tkinter as ttk
import tkinter.tix as tix 
from tkinter.constants import *

root = tix.Tk()   #主窗口root
root.title("可視化設計結果")
root.geometry('{}x{}'.format(300,300))  #改變窗口大小

f0=tk.Button(root,text='label0',command=None)
f0.pack(anchor='n',side='top',fill='x',expand=0)
f1=tk.Button(root,text='label1',command=None)
f1.pack(anchor='n',side='left',fill='y',expand=0)
f2=tk.Button(root,text='label2',command=None)
f2.pack(anchor='n',side='bottom',fill='x',expand=0)
f3=tk.Button(root,text='label3',command=None)
f3.pack(anchor='n',side='right',fill='both',expand=1)
root.mainloop()

這個程序運行，產生下面圖形。

程序執行結果與可視化設計的圖形一致。
這篇我們介紹了Tkinter的Pack佈局可視化及生成代碼的過程。至此我們完成了Place佈局、Grid佈局、Pack佈局的可視化設計。
Tkinter還有一個Form佈局，這個佈局可視化設計完成，我們用Tkinter進行可視化Tkinter的GUI程序的設計技術就全部具備。後面就可以在此基礎上用Tkinter做一個Python的可視化程序開發工具。