Skip to content

Files

Latest commit

Qi BinyiQi Binyi
Qi Binyi
and
Qi Binyi
Jan 7, 2024
dabc234 · Jan 7, 2024

History

History
92 lines (64 loc) · 2.91 KB

tkinter_layout.md

File metadata and controls

92 lines (64 loc) · 2.91 KB

An overview of tkinter layouts

3 major methods

  1. pack
    • takes a window and lets you stack widgets in a certain direction.
    • by default, you are going place widgets from the top to the bottom
      • while you're doing that, you can also customize things quite a bit.
      • for example, you can tell widgets to take up the entire horizontal space, or the entire vertical space, or both as well.
    • besides that, you can also stack widgets in different directions.
      • e.g. from left to right, from right to left, from bottom to top.
  2. grid
    • works by creating a grid over the window, and this grid you are then using to place widgets in a certain position with a certain size.
    • this system gives you a ton of flexibility.
      • you can change the height of each row, or the width of each column.
    • grid is generally the system you want to use if you want to create really complex layouts.
  3. place
    • take a window and you place widgets with a certain position.
    • you can also change the size.
    • fairly straightforward you always have an X and a Y postion.

You can combine these layout methods very easily.

A couple of important things

  • You will rely heavily on parenting and frames
  • That way you can combine diferent layouts easily and keep them organized.
    • Basically what you are going to do is you are placing one layout inside of a frame, and then you are placing that frame.

example

pack example

# widgets
lable1 = tk.Label(window, text="Label 1", background="red")
lable2 = tk.Label(window, text="Label 2", background="blue")

# pack
lable1.pack(side="left", expand=True, fill="y")  # expand to entire window
lable2.pack(side="bottom")

grid example

# grid
window.columnconfigure(0, weight=1)  # 3 columns with different weights (1, 1, 2)
window.columnconfigure(1, weight=1)
window.columnconfigure(2, weight=2)
window.rowconfigure(0, weight=1)  # 1 row with weight 1
window.rowconfigure(1, weight=1)  # 1 row with weight 1

label1.grid(row=0, column=1, sticky="nsew")  # sticky: n, s, e, w, ne, se, sw, nw
label2.grid(row=1, column=1, columnspan=2, sticky="nsew")

place example

# place
label1.place(x=200, y=150, width=150, anchor="nw")
label2.place(
    relx=0.5, rely=0.5, anchor="center", relwidth=0.5, relheight=0.5
)  # large botton which has area of 1/4 of window