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

由於您的界面包含固定大小的圖像，最簡單的解決方案是使用place幾何管理器（而不是grid管理器）定義按鈕的place ，就像您已經為定位圖像所做的那樣。 只需通過反復試驗找到坐標，直到獲得視覺上令人愉悅的東西。

您仍然可以將grid用於其他小部件...

Answer 2

我的建議是創建一個具有透明背景的框架。 您放置此框架（使用位置布局管理器），使其正好位於中心的矩形上方。 然后您可以使用標准布局管理器將按鈕添加到透明框架中。 這種安排會更靈活，更容易理解。

TkInter 版本 >8.6 支持具有透明背景的小部件，除非您的 Python 安裝很舊，否則這可能是您所擁有的。 有關更多信息，請參閱： 有沒有辦法使用 Tkinter 創建透明窗口？

Answer 3

您可以使用grid幾何管理器整齊地放置所有小部件。 此外，您必須考慮使用以下選項padx, pady, ipadx & ipady提供一些填充padx, pady, ipadx & ipady以使您的 GUI 看起來整潔和對齊。

我已經評論了您的一些代碼行，因為它們可能是在您未包含在問題中的代碼的其他部分中定義的。

所以基本上我所做的改變是我只使用了grid系統。 設置標簽background_label您的內部root窗口，然后設置在內部所有其他部件background_label ，這樣有層次

root (contains) background_label (contains) 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 的外觀

您可以使用填充選項並將它們設置為您的要求。 希望你明白我的解釋。