为什么按钮不能正确对齐(Tkinter)?

So, I have been trying to design a simple calculator GUI using Tkinter. But I am facing this weird issue that I can't fix. This is my code, I hope it doesn't look messy.

from tkinter import *

root = Tk()

display = Entry(root,width=48,borderwidth=5)
display.grid(row=0,column=0,columnspan=3)

button_1 = Button(root, text="1",width=16,height=3)
button_2 = Button(root, text="2",width=16,height=3)
button_3 = Button(root, text="3",width=16,height=3)
button_4 = Button(root, text="4",width=16,height=3)
button_5 = Button(root, text="5",width=16,height=3)
button_6 = Button(root, text="6",width=16,height=3)
button_7 = Button(root, text="7",width=16,height=3)
button_8 = Button(root, text="8",width=16,height=3)
button_9 = Button(root, text="9",width=16,height=3)
button_0 = Button(root, text="0",width=16,height=3)

button_clear = Button(root, text="Clear",width=32,height=3)
button_plus = Button(root, text="+",width=16,height=3)
button_equal = Button(root, text="=",width=32,height=3)

button_1.grid(row=3,column=0)
button_2.grid(row=3,column=1)
button_3.grid(row=3,column=2)

button_4.grid(row=2,column=0)
button_5.grid(row=2,column=1)
button_6.grid(row=2,column=2)

button_7.grid(row=1,column=0)
button_8.grid(row=1,column=1)
button_9.grid(row=1,column=2)

button_0.grid(row=4,column=0)

button_clear.grid(row=4,column=1,columnspan=2)
button_plus.grid(row=5,column=0)
button_equal.grid(row=5,column=1,columnspan=2)

root.mainloop()

Here's a screenshot of the GUI

First Problem: Why doesn't the clear and equal button align up with the 3, 6, 9 buttons, just look at the right margin of the buttons, how its not properly aligned.

I have set the width for buttons 3, 6, 9 as 16 and for clear and equal buttons its just double 32, and also these clear and equal buttons have column-span of 2 columns.

Second Problem: This is a secondary issue since it doesn't make the GUI look ugly. Why does't the entry widget on the top match the width of the number buttons below it, the entry widget's width is set to 48, thrice the individual buttons.

提前致谢!

评论
  • 一纸离人醉
    一纸离人醉 回复

    The problem is that the button is literally too small to take up 2 columns, and tkinter doesn't stretch them up automatically. You'd have to configure the stretching manually using sticky property so it knows the direction(s) of the stretch: button_clear.grid(row=4,column=1,columnspan=2, sticky='we'). Here is your full code fixed:

    from tkinter import *
    
    root = Tk()
    
    display = Entry(root,width=48,borderwidth=5)
    display.grid(row=0,column=0,columnspan=3)
    
    button_1 = Button(root, text="1",width=16,height=3)
    button_2 = Button(root, text="2",width=16,height=3)
    button_3 = Button(root, text="3",width=16,height=3)
    button_4 = Button(root, text="4",width=16,height=3)
    button_5 = Button(root, text="5",width=16,height=3)
    button_6 = Button(root, text="6",width=16,height=3)
    button_7 = Button(root, text="7",width=16,height=3)
    button_8 = Button(root, text="8",width=16,height=3)
    button_9 = Button(root, text="9",width=16,height=3)
    button_0 = Button(root, text="0",width=16,height=3)
    
    button_clear = Button(root, text="Clear",width=32,height=3)
    button_plus = Button(root, text="+",width=16,height=3)
    button_equal = Button(root, text="=",width=32,height=3)
    
    button_1.grid(row=3,column=0)
    button_2.grid(row=3,column=1)
    button_3.grid(row=3,column=2)
    
    button_4.grid(row=2,column=0)
    button_5.grid(row=2,column=1)
    button_6.grid(row=2,column=2)
    
    button_7.grid(row=1,column=0)
    button_8.grid(row=1,column=1)
    button_9.grid(row=1,column=2)
    
    button_0.grid(row=4,column=0)
    
    button_clear.grid(row=4,column=1,columnspan=2, sticky='we')
    button_plus.grid(row=5,column=0)
    button_equal.grid(row=5,column=1,columnspan=2, sticky='we')
    
    root.mainloop()
    

    希望对您有所帮助!