tkinter的GUI設計：界面與邏輯分離（一）-- 初次見面

時間 2019-11-17

標籤 tkinter gui 設計界面邏輯分離初次見面简体版

原文原文鏈接

PyQt實現界面與邏輯分離的設計非常方便，詳情能夠見個人第一篇博文。html

不過本文將使用python的標準庫 tkinter，來實現界面與邏輯分離的GUI 設計。python

咱們來設計一個很簡單的程序：app

　　目的：長度單位英尺(feet)到米(meter)的轉化oop

　　實現：輸入框輸入英尺(feet)，標籤顯示對應的長度米(meter)。能夠點擊按鈕，亦可按回車鍵。ui

　　說明：界面使用了 ttk.Frame 容器，各個部件的定位皆使用了 grid() 方法，3行3列spa

　　效果：以下設計

　　代碼：眼力好的你必定會發現，下面的代碼風格有點像PyQt：3d

import tkinter as tk
from tkinter import ttk


class Application(tk.Tk): # 繼承自 tk.Tk
    '''界面、邏輯分離示例'''
    
    def __init__(self):
        '''初始化'''
        super().__init__() # 有點至關於tk.Tk()
        
        self.createWidgets()

    def createWidgets(self):
        '''界面'''
        self.mainframe = ttk.Frame(self, padding="3 3 12 12") # 注意ttk.Frame()的第一個參數爲self，由於這個類繼承自tk.Tk類
        self.mainframe.grid(column=0, row=0, sticky=(tk.N, tk.W, tk.E, tk.S))
        self.mainframe.columnconfigure(0, weight=1)
        self.mainframe.rowconfigure(0, weight=1)

        # 定義了兩個變量（下面會將它們綁定到輸入部件 Entry 和標籤部件 Label 上）
        # self.feet = StringVar()
        self.feet = tk.DoubleVar()
        self.meters = tk.StringVar()

        # 定義Entry部件，並把它賦給一個變量，方便在別處引用它。
        self.feet_entry = ttk.Entry(self.mainframe, width=7, textvariable=self.feet)
        self.feet_entry.grid(row=1, column=2, sticky=(tk.W, tk.E))
        self.feet_entry.focus()

        # 定義Label部件
        ttk.Label(self.mainframe, textvariable=self.meters).grid(row=2, column=2, sticky=(tk.W, tk.E))
        
        # 定義Button部件
        ttk.Button(self.mainframe, text="Calculate", command=self.calculate).grid(row=3, column=3, sticky=tk.W)

        # 定義三個Label部件
        ttk.Label(self.mainframe, text="feet").grid(row=1, column=3, sticky=tk.W)
        ttk.Label(self.mainframe, text="is equivalent to").grid(row=2, column=1, sticky=tk.E)
        ttk.Label(self.mainframe, text="meters").grid(row=2, column=3, sticky=tk.W)
        
        # 設置每格的 padding
        for child in self.mainframe.winfo_children(): 
            child.grid_configure(padx=5, pady=5)
            
        
        # 給窗口綁定回車鍵事件
        self.bind('<Return>', self.calculate)

    
    def calculate(self, *args): # 注意：參數必須是帶!星!號!的 *args. 不然不管如何都會報類型錯誤：TypeError
        '''邏輯'''
        try:
            #value = float(self.feet.get()) # 若是前面定義爲stringVar: self.feet = StringVar()
            value = self.feet.get()
            self.meters.set('{:.4f}'.format((0.3048 * value * 10000.0 + 0.5)/10000.0))
        except ValueError:
            pass


if __name__ == '__maint__':
    # 實例化Application
    app = Application()
    
    # 設置窗口標題
    app.title("Feet to Meters")
    
    # 主消息循環:
    app.mainloop()