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

您可以使用grid几何管理器整齐地放置所有小部件。您还必须考虑使用以下选项提供一些填充，以使您的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的外观

您可以随意使用填充选项，并根据自己的要求进行设置。希望你能理解我的解释。你知道吗

Answer 3

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

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