Creating a GUI App with Python PySimpleGUI: Tutorial 23 on Column Elements

In this tutorial, we will be creating a GUI application using the PySimpleGUI library in Python. Specifically, we will be focusing on creating a column element in our GUI. The column element allows us to organize our GUI components in a vertical or horizontal column, making it easier to create a clean and organized layout for our application.

To get started, first make sure you have the PySimpleGUI library installed. You can install it using pip by running the following command:

pip install PySimpleGUI

Once you have PySimpleGUI installed, we can start creating our GUI application. Here is a basic template to get started with:

import PySimpleGUI as sg

layout = [
    [sg.Text('Column Element GUI App')],
    [sg.Column([
        [sg.Text('Row 1')],
        [sg.Text('Row 2')],
        [sg.Text('Row 3')]
    ])],
    [sg.Button('Submit')]
]

window = sg.Window('Column Element GUI App', layout)

while True:
    event, values = window.read()

    if event == sg.WIN_CLOSED or event == 'Submit':
        break

window.close()

In the code above, we have created a simple GUI layout with a title text, a column element containing three rows of text elements, and a submit button. The sg.Text elements are used to display text in our GUI, and the sg.Column element is used to organize those text elements in a vertical column.

When the user clicks the submit button or closes the window, the application will exit. Now let’s explore some additional features and customization options for the column element:

1. Horizontal Layout: By default, the column element organizes components vertically. However, you can specify the horizontal_scroll parameter to organize components horizontally. For example:

sg.Column([
    [sg.Text('Item 1')],
    [sg.Text('Item 2')],
    [sg.Text('Item 3')]
], scrollable=True, vertical_scroll_only=True)

1. Width and Height: You can set the width and height of the column element using the size parameter. For example, to create a column with a width of 200 pixels and a height of 300 pixels:

sg.Column([
    [sg.Text('Item 1')],
    [sg.Text('Item 2')],
    [sg.Text('Item 3')]
], size=(200, 300))

1. Padding and Spacing: You can adjust the padding and spacing between components in the column element using the pad and element_justification parameters. For example:

sg.Column([
    [sg.Text('Item 1')],
    [sg.Text('Item 2')],
    [sg.Text('Item 3')]
], pad=(10, 10), element_justification='center')

1. Scrolling: If the content in the column element exceeds its size, you can enable scrolling by setting the scrollable parameter to True. For example:

sg.Column([
    [sg.Text(f'Item {i}') for i in range(100)]
], scrollable=True)

1. Nested Layouts: You can nest layouts within a column element to create more complex GUI structures. For example:

sg.Column([
    [sg.Text('Main Column')],
    [sg.Column([
        [sg.Text('Sub Column 1')],
        [sg.Text('Sub Column 2')]
    ])]
])

By utilizing the features and customization options mentioned above, you can create versatile and visually appealing GUI applications with the PySimpleGUI library. Experiment with different layouts, styles, and configurations to tailor your application to suit your needs.