The Grid System

In GooeyPie, you organize your app’s layout using a grid system.

• Columns go across (1, 2, 3, …)
• Rows go down (1, 2, 3, …)

To add a widget to the window, you use the add() method, and specify the column and row for that widget:

app.add(widget, column, row)

Spanning Columns and Rows

Sometimes you want a widget to stretch across multiple columns or rows. You can do this using the column_span and row_span parameters when adding a widget:

app.add(widget, column, row, column_span=2, row_span=2)

This will make the widget span across 2 columns and 2 rows, allowing it to take up more space in the layout. You can adjust the column_span and row_span values to fit your design needs.

Spanning Example

spanning-rows-and-columns.py

import gooeypie as gp

app = gp.GooeyPieApp("Spanning Rows and Columns")

# Create widgets
button1 = gp.Button("1,1", None)
red_button = gp.Button("2,1 (Spanning 2 columns)", None)
green_button = gp.Button("1,2 (Spanning 2 rows)", None)
button4 = gp.Button("2,2", None)
button5 = gp.Button("3,2", None)
button6 = gp.Button("2,3", None)
button7 = gp.Button("3,3", None)

red_button.style.button_color = 'IndianRed'
green_button.style.button_color = 'MediumSeaGreen'

# Row 1
app.add(button1, 1, 1)
app.add(red_button, 2, 1, column_span=2, expand_horizontal=True) # Spans col 2 and 3

# Row 2
app.add(green_button, 1, 2, row_span=2, expand_vertical=True)    # Spans row 2 and 3
app.add(button4, 2, 2)
app.add(button5, 3, 2)

# Row 3 (filling in the rest)
app.add(button6, 2, 3)
app.add(button7, 3, 3)

app.run()

Alignment and expansion

Once a widget is placed in a grid cell, you can control how it behaves if that cell happens to be larger than the widget itself.

Alignment: “Where do I sit?”

Alignment tells the widget where to place itself itself within the space of its cell.

Argument	Purpose	Allowable Values
align_horizontal	Left-to-right position	"left", "center" or "right"
align_vertical	Top-to-bottom position	"top", "center" or "bottom"

Expansion: “Should I stretch?”

Expansion tells the widget to stop being its natural size and instead grow until it touches the edges of its cell.

• expand_horizontal. Set to True to stretch the widget to the full width of the cell.
• expand_vertical. Set to True to stretch the widget to the full height of the cell.

Column and Row Weights

When you resize a window, GooeyPie needs to know which columns and rows should grow to fill the extra space. We do this using weights.

Think of a weight like a spring placed inside a column or row:

• Columns have “Springs”: By default, all columns have a weight of 1. They will automatically push against the window edges to fill space evenly. But keep in mind, the widgets themselves will not automatically grow to fill that space!

• Rows are “Tight”: By default, rows have a weight of 0. They have no springs; they stay as small as possible to fit your widgets unless you tell them to grow.

How to Set Weights

To control how your grid grows, set the weights for the entire grid at once. This gives you a clear “map” of your layout in one line of code.

You can set the weight of columns and rows using the set_column_weights() and set_row_weights() methods:

app.set_column_weights(column1_weight, column2_weight, ...)
app.set_row_weights(row1_weight, row2_weight, ...)

• A weight of 1 means the column or row will grow to fill available space.
• A weight of 0 means it will not grow at all.
• You can use any positive number for weights, and they will be distributed proportionally. For example, if you have two columns with weights 1 and 2, the second column will grow twice as much as the first when the window is resized.

Always set your weights last!

When you’re building your layout, make sure you’ve added all your widgets before settting the column and row weights. This way, you can see how everything fits together before deciding which columns and rows should grow when the window is resized.

The “Magic Combo” for Filling Space

If you want a widget to fill up the space available in its cell, you need to use two things together:

1. A weight > 0: This makes the Column or Row grow .
2. An expansion (expand_horizontal or expand_vertical): This makes the Widget stretch to fill that newly grown space.

Without expansion, the cell grows, but the widget stays small in the middle!

Example: A Message Form

In this example, we want the second column to grow when the window is resized horizontally, so that the Entry and Textbox stretch to fill the space. We also want the Textbox to grow vertically, so it takes up more space as the window gets taller.

message_form.py

import gooeypie as gp

app = gp.GooeyPieApp("Message Form")

# Name label and entry
name_label = gp.Label("Name")
name_entry = gp.Entry()

# Message label and textbox
message_label = gp.Label("Message")
message_entry = gp.Textbox()

submit_btn = gp.Button("Send Message", None)

# Add widgets, make sure widgets expand as needed
app.add(name_label, 1, 1)
app.add(name_entry, 2, 1, expand_horizontal=True)
app.add(message_label, 1, 2)
app.add(message_entry, 2, 2, expand_horizontal=True, expand_vertical=True)
app.add(submit_btn, 2, 3, align_horizontal="right")

# Set column weights
app.set_column_weights(0, 1)  # 2 columns, only grow the second one

# Set row weights
app.set_row_weights(0, 1, 0)  # 3 rows, only grow the middle one

app.run()