python UI 之使用tkinter库制作界面时实现拖动时零件跟随变化

python UI 之使用tkinter库制作界面时实现拖动时零件跟随变化

在用tkinter写界面的时候，想要界面被拖动变大变小的时候，界面里面的零件（按钮、文本一类）也跟着一起变动，该怎么办呢？
可以通过在界面里面添加Frame，然后把零件都写在Frame里面，通过grid来给零件和Frame定位，注意一定要在grid里面写好sticky，这样就可以实现啦

以登录注册页面为例

首先import tkinter.messagebox
from tkinter import *

class Login1(object):
    def __init__(self, root):
        self.root = root
        root.rowconfigure(0, weight=1)
        root.columnconfigure(0, weight=1)
        # variables
        self.varName = StringVar(value='')
        self.varPwd = StringVar(value='')
        # labels
        self.labelEmail = tkinter.Label(self.root, text='邮箱')
        self.labelPwd = tkinter.Label(self.root, text='密码')
        # entries
        self.entryEmail = tkinter.Entry(self.root, textvariable=self.varName)
        self.entryPwd = tkinter.Entry(self.root, show='*', textvariable=self.varPwd)
        # buttons
        self.buttonOk = tkinter.Button(self.root, text='登录')
        self.buttonCancel = tkinter.Button(self.root, text='取消')
        self.buttonExchange = tkinter.Button(self.root, text='注册')

        self.arrange()
        self.root.mainloop()

    def arrange(self):

        self.labelEmail.grid(row=0, padx=10, pady=10)
        self.labelPwd.grid(row=1,  padx=10, pady=10)

        self.entryEmail.grid(row=0, column=1, padx=10, pady=10, columnspan=2)
        self.entryPwd.grid(row=1, column=1, padx=10, pady=10, columnspan=2)
        self.buttonOk.grid(row=3, column=0, padx=10, pady=10 )
        self.buttonCancel.grid(row=3, column=1, padx=10, pady=10 )
        self.buttonExchange.grid(row=3, column=2, padx=10, pady=10,)

root=tkinter.Tk()
root.title('注册')
if __name__=="__main__":
    Login1(root)

以上代码的效果是


可以注意到，当我们拖动边框右边的时候，零件不自然移动。

解决办法

加入一个frame作为框架，再写入sticky

class Login(object):
    def __init__(self, root):
        self.root = root
        root.rowconfigure(0, weight=1)
        root.columnconfigure(0, weight=1)
#######################################################
        self.frame = Frame(self.root)
        self.frame.grid(row=0, padx=10, pady=10, sticky=NSEW)
#######################################################
        # variables
        self.varName = StringVar(value='')
        self.varPwd = StringVar(value='')
        # labels
        self.labelEmail = tkinter.Label(self.frame, text='邮箱')
        self.labelPwd = tkinter.Label(self.frame, text='密码')
        # entries
        self.entryEmail = tkinter.Entry(self.frame, textvariable=self.varName)
        self.entryPwd = tkinter.Entry(self.frame, show='*', textvariable=self.varPwd)
        # buttons
        self.buttonOk = tkinter.Button(self.frame, text='登录')
        self.buttonCancel = tkinter.Button(self.frame, text='取消')
        self.buttonExchange = tkinter.Button(self.frame, text='注册')

        self.arrange()
        self.root.mainloop()

    def arrange(self):
        self.frame.rowconfigure(0, weight=1)
        self.frame.rowconfigure(1, weight=1)
        self.frame.rowconfigure(2, weight=1)
        self.frame.columnconfigure(0, weight=1)
        self.frame.columnconfigure(1, weight=1)
        self.frame.columnconfigure(2, weight=1)
#######################################################
        self.labelEmail.grid(row=0, sticky=NSEW, padx=10, pady=10)
        self.labelPwd.grid(row=1, sticky=NSEW, padx=10, pady=10)

        self.entryEmail.grid(row=0, column=1, padx=10, pady=10, columnspan=2, sticky=EW)
        self.entryPwd.grid(row=1, column=1, padx=10, pady=10, columnspan=2, sticky=EW)
        self.buttonOk.grid(row=3, column=0, padx=10, pady=10, sticky=NSEW)
        self.buttonCancel.grid(row=3, column=1, padx=10, pady=10, sticky=NSEW)
        self.buttonExchange.grid(row=3, column=2, padx=10, pady=10, sticky=NSEW) #######################################################

有改动的代码我都用#######框出来了，以方便读者参阅。
我们看看效果：


可以看到这个界面很自然的被拉长。

以上是我的代码和方法，如有问题欢迎指出。
谢谢大家！