使用Tkinter实现按钮对齐遇问题：布局效果不符合预期

我尝试用Tkinter创建密码管理器窗口，通过grid布局排列控件，但对齐效果未达预期。作业要求的窗口样式和输出不符，代码和参考答案完全一致却找不到问题，附上代码如下，希望实现精准对齐：

from tkinter import *

window = Tk()
window.title("Password Manager")
window.config(padx=20, pady=20)

canvas = Canvas(width=200, height=200)
img = PhotoImage(file="logo.png")
canvas.create_image(100, 100, image=img)
canvas.grid(column=1, row=0)

# website input
label_web = Label(text="Website:")
label_web.grid(column=0, row=1)

web = Entry(width=35)
web.grid(column=1, columnspan=2, row=1)
# mail input
label_mail = Label(text="Email/Username:")
label_mail.grid(column=0, row=2)

mail = Entry(width=35)
mail.grid(column=1, columnspan=2, row=2)

# pass input
label_pass = Label(text="Password:")
label_pass.grid(column=0, row=3)

password = Entry(width=21)
password.grid(column=1, row=3)

# add butt
add_butt = Button(text="Add", width=35)
add_butt.grid(column=1, columnspan=2,row=4)

# generate butt
generate_butt = Button(text="Generate Password")
generate_butt.grid(column=2, row=3)

window.mainloop()

问题分析与解决方案 #

原代码核心问题是未设置控件对齐属性（sticky）和列权重，导致控件在grid单元格内居中，无法和标签精准对齐，窗口缩放时布局也会混乱。以下是修改后的代码及关键调整：

from tkinter import *

window = Tk()
window.title("Password Manager")
window.config(padx=20, pady=20)

# 设置列权重，让列1和列2随窗口宽度自适应扩展
window.grid_columnconfigure(1, weight=1)
window.grid_columnconfigure(2, weight=1)

canvas = Canvas(width=200, height=200)
img = PhotoImage(file="logo.png")
canvas.create_image(100, 100, image=img)
canvas.grid(column=1, row=0)

# website input
label_web = Label(text="Website:")
# 标签左对齐，和输入框起始位置对齐
label_web.grid(column=0, row=1, sticky="w")

web = Entry(width=35)
# 输入框左右填充单元格，保持和标签对齐
web.grid(column=1, columnspan=2, row=1, sticky="ew")

# mail input
label_mail = Label(text="Email/Username:")
label_mail.grid(column=0, row=2, sticky="w")

mail = Entry(width=35)
mail.grid(column=1, columnspan=2, row=2, sticky="ew")

# pass input
label_pass = Label(text="Password:")
label_pass.grid(column=0, row=3, sticky="w")

password = Entry(width=21)
# 密码输入框左对齐
password.grid(column=1, row=3, sticky="w")

# generate butt
generate_butt = Button(text="Generate Password")
# 生成按钮右对齐，和密码输入框在同一行右侧对齐
generate_butt.grid(column=2, row=3, sticky="e")

# add butt
add_butt = Button(text="Add", width=35)
add_butt.grid(column=1, columnspan=2, row=4, sticky="ew")

window.mainloop()

关键修改点说明 #

• sticky属性：给标签添加sticky="w"实现左对齐，输入框和按钮根据需求设置sticky="ew"（左右填充单元格）或sticky="e"（右对齐），确保控件位置和标签精准匹配。
• 列权重：通过grid_columnconfigure设置列1和列2的权重为1，让这两列在窗口缩放时自动扩展宽度，避免布局错位。
• 代码顺序调整：将Generate按钮代码移至Add按钮前，逻辑上和密码输入框归为同一模块，代码结构更清晰。

内容的提问来源于stack exchange，提问作者Janavarshan L.p