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

Question

我希望我的按钮和文本整齐地放置在“登录”框区域的范围内。 “登录”框实际上是我使用 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

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

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

Answer 2

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

您仍然可以将grid 用于其他小部件...

Answer 3

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

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

所以基本上我所做的更改是我只使用了grid 系统。在root 窗口内设置标签background_label，然后在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 的外观

您可以使用填充选项并将它们设置为您的要求。希望你明白我的解释。