tkinter的GUI设计:界面与逻辑分离(一)-- 初次见面

简介:

PyQt实现界面与逻辑分离的设计很是方便,详情可以见我的第一篇博文。

 

不过本文将使用python的标准库 tkinter,来实现界面与逻辑分离的GUI 设计。

 

我们来设计一个很简单的程序:

  目的:长度单位英尺(feet)到米(meter)的转化

  实现:输入框输入英尺(feet),标签显示对应的长度米(meter)。可以点击按钮,亦可按回车键。

  说明:界面使用了 ttk.Frame 容器,各个部件的定位皆使用了 grid() 方法,3行3列

                    

  效果:如下

                        

  代码: 眼力好的你一定会发现,下面的代码风格有点像PyQt:

复制代码
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()
复制代码

 

 

参考:

http://www.360doc.com/content/14/0328/02/9482_364311622.shtml

http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0013868326118089581a091a04e4c30b2b7896392bdde5c000

本文转自罗兵博客园博客,原文链接:http://www.cnblogs.com/hhh5460/p/5170251.html ,如需转载请自行联系原作者
相关文章
|
前端开发 开发工具 iOS开发
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(1)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
282 0
|
3月前
|
容器 C# 开发者
XAML语言大揭秘:WPF标记的魅力所在,让你轻松实现界面与逻辑分离,告别复杂代码!
【8月更文挑战第31天】XAML提供了一种直观且易于维护的界面设计方式,使得开发者可以专注于逻辑和业务代码的编写,而无需关心界面细节。通过数据绑定、布局管理和动画效果等特性,XAML可以实现丰富的界面交互和视觉效果。在实际开发过程中,开发者应根据具体需求选择合适的技术方案,以确保应用程序能够满足用户的需求。希望本文的内容能够帮助您在WPF应用程序开发中更好地利用XAML语言。
40 0
|
3月前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
44 0
|
前端开发 数据处理 Swift
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(3)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
119 0
|
前端开发 开发工具 iOS开发
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(2)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
71 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
52 1
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
54 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件1
前端学习笔记202305学习笔记第二十三天-重构菜单组件1
49 0
【小试身手】几个自定义控件的组合应用,实现简单的“增删改查”功能(有源码)
     分页控件、查询控件、显示数据的控件和表单控件,终于把这几个控件结合在一起了,和在一起之后就可以让“增删改查”变的非常的简单和容易了,当然还需要数据访问函数库的支持。      综合演示的IDE是 vs2008,.net Framework2.0,C#, B/S 。
1044 0