Search code examples
pythontkintertkinter-layout

What is the Standard way to Achieve this grid in Tkinter?


I'm trying to create:

UI Im trying to create

I'm Trying to Create this grid layout (ignoring Entry box right now) but I'm Having issue in stretching the 5th row having 5 columns equally. So far, I have achieved this.

so far my output

Code I have coded so far is given below but do let me know the standard way to achieve this grid.

import tkinter as tk

root = tk.Tk()

frame = tk.Frame(root)
frame.pack(expand=True, fill='both')

num = 1
for i in range(0, 3):
    for j in range(0, 3):
        tk.Button(frame, text=num).grid(row=i, column=j, sticky='nsew')
        num += 1
        frame.columnconfigure(i, weight=1)
        frame.rowconfigure(i, weight=1)

tk.Button(frame, text='-').grid(row=4, column=0, sticky='nsew')
tk.Button(frame, text=0).grid(row=4, column=1, sticky='nsew')
tk.Button(frame, text='.').grid(row=4, column=2, sticky='nsew')
frame.rowconfigure(4, weight=1)

frame2 = tk.Frame(frame)
frame2.grid(row=5, columnspan=3)

frame2.rowconfigure(0, weight=1)
frame2.rowconfigure(1, weight=1)
frame2.rowconfigure(2, weight=1)
frame2.rowconfigure(3, weight=1)
frame2.rowconfigure(4, weight=1)

tk.Button(frame2, text='+').grid(row=0, column=0, sticky='nsew')
tk.Button(frame2, text='-').grid(row=0, column=1, sticky='nsew')
tk.Button(frame2, text='*').grid(row=0, column=2, sticky='nsew')
tk.Button(frame2, text='/').grid(row=0, column=3, sticky='nsew')
tk.Button(frame2, text='=').grid(row=0, column=4, sticky='nsew')


root.mainloop()


Solution

  • Followed by @Thingambobs. frame2.grid(row=5, columnspan=3, sticky='we')

    • On line 12, add width=5 for Button widget to suit your need.
    • If you like to add an Entry widget. Just add on line 17 and 18. See snippet.
    • On line 28, then add button for "CLR" tk.Button(frame, text='CLR', width=5).grid(row=6,column=0,columnspan=5, sticky='we')
    • These five Button widgets, change sticky to sticky='we'

    Snippet:

    import tkinter as tk
    
    root = tk.Tk()
    #root.grid_propagate()
    
    frame = tk.Frame(root)
    frame.grid(row=0, column=0, sticky='nsew')
    
    num = 1
    for i in range(0, 3):
        for j in range(0, 3):
            tk.Button(frame, text=num, width=5).grid(row=i+1, column=j, sticky='nsew')
            num += 1
            frame.columnconfigure(i, weight=1)
            frame.rowconfigure(i, weight=5)
    
    entry = tk.Entry(frame, width=25)
    entry.grid(row=0, column=0, columnspan=3, sticky='we')
    
    tk.Button(frame, text='-').grid(row=4, column=0, sticky='nsew')
    tk.Button(frame, text=0).grid(row=4, column=1, sticky='nsew')
    tk.Button(frame, text='.').grid(row=4, column=2, sticky='nsew')
    frame.rowconfigure(4, weight=1)
    
    frame2 = tk.Frame(frame)
    frame2.grid(row=5, columnspan=3, sticky='we')
    
    tk.Button(frame, text='CLR').grid(row=6, column=0,columnspan=5, sticky='we') 
    
    tk.Button(frame2, text='+', width=5).grid(row=0, column=0, sticky='we')
    tk.Button(frame2, text='-', width=5).grid(row=0, column=1, sticky='we')
    tk.Button(frame2, text='*', width=5).grid(row=0, column=2, sticky='we')
    tk.Button(frame2, text='/', width=5).grid(row=0, column=3, sticky='we')
    tk.Button(frame2, text='=', width=5).grid(row=0, column=4, sticky='we')
    
    root.mainloop()
    

    Screenshot:

    enter image description here