TKinter，在窗口的某些部分上放置小部件，使其与背景图像对齐

Question

我希望将按钮和文本整齐地放置在“登录”（Login）框区域内。 “登录”框实际上是我用TKinter加载的背景PNG图像的一部分。我希望将小部件很好地放置在后台的“登录”框中。我当前正在使用grid（），但是由于某些原因，它们与该“登录”框不匹配。如何调整我的代码以使内容出现在“登录”框中？

def build_login_screen(root):
    background_image = PhotoImage(file="./loginScreen.png", name="background_image")
    background_label = Label(root, image=background_image, name="background_label")
    background_label.place(x=0, y=0, relwidth=1, relheight=1)
    background_label.image = background_image
    login_button = Button(root, text="Login", name="login_button", command=lambda: login(root))
    login_button.grid(row=5, column=1)
    quit_button = Button(root, text="Quit", name="quit_button", command=root.destroy)
    quit_button.grid(row=8, column=1)
    server_select = Combobox(root, name='server_select')
    server_select['values'] = (remote_server, local_server)
    server_select.current(0)  
    server_select.grid(row=4, column=1)
    server_select.bind("<<ComboboxSelected>>", clickServer)
    label_server_status = Label(root, padx=50, text="Checking server status..", name="label_server_status")
    label_server_status.grid(row=4, column=2)
    label_server_status_value = Label(root, padx=50, text=server_availability, name="label_server_status_value")
    label_server_status_value.grid(row=4, column=3)

Answer 1

由于您的界面包含大小固定的图像，因此最简单的解决方案是使用place几何管理器（而不是grid管理器）定义按钮的位置确实找到了您的图片。只需通过反复试验即可找到坐标，直到获得令人愉悦的视觉效果为止。

对于其他小部件，您仍然可以使用grid ...

Answer 2

我的建议是创建一个具有透明背景的框架。您放置该框架（使用位置布局管理器），以使其恰好位于中心矩形上方。然后，您可以使用标准布局管理器将按钮添加到透明框架。这样的安排将更加灵活和易于理解。

TkInter版本> 8.6中支持具有透明背景的小部件，除非您的Python安装非常旧，否则可能就是这样。有关更多信息，请参见：Is there a way to create transparent windows with Tkinter?

Answer 3

您可以使用grid几何管理器来整齐地放置所有小部件。另外，您还必须考虑使用以下选项padx, pady, ipadx & ipady提供一些 padding ，以使您的GUI看起来整洁和对齐。

我已经注释了您的代码中的某些行，因为它们可能是在代码的其他部分中定义的，而您未在问题中包含这些行。

因此，基本上我所做的更改是仅使用grid系统。在您的background_label窗口中设置标签root，然后在background_label内排列所有其他小部件，以便有一个层次结构

root（包含）background_label（包含）Buttons, labels and other widgets

最后为每个小部件添加一些填充。

代码：

import tkinter as tk
from tkinter import ttk
from PIL import Image, ImageTk

root = tk.Tk()

background_image = ImageTk.PhotoImage(file="./img/bg.jpg", name="background_image")
background_label = tk.Label(root, image=background_image, name="background_label", height=200, width=160)
background_label.grid(row=0, column=0, pady=10, padx=10, ipady=10, ipadx=3)
background_label.image = background_image

login_button = tk.Button(background_label, text="Login", name="login_button", command=lambda: login(root))
login_button.grid(row=1, columnspan=3, pady=(4,8))

quit_button = tk.Button(background_label, text="Quit", name="quit_button", command=root.destroy)
quit_button.grid(row=2, columnspan=3)

server_select = ttk.Combobox(background_label, name='server_select')
#server_select['values'] = (remote_server, local_server)
#server_select.current(0)  
server_select.grid(row=0, column=0, pady=4, padx=(6,5))
#server_select.bind("<<ComboboxSelected>>", clickServer)

label_server_status = tk.Label(background_label, padx=50, text="Checking server status..", name="label_server_status")
label_server_status.grid(row=0, column=1, pady=4, padx=(0,5))

label_server_status_value = tk.Label(background_label, padx=50, text='server_availability', name="label_server_status_value")
label_server_status_value.grid(row=0, column=2, pady=4, padx=(0,5))

root.mainloop()

输出： 这就是您运行上述代码时GUI的外观

您可以尝试使用填充选项并将其设置为您的要求。希望你理解我的解释。