【Python（PySimpleGUI）でGUIアプリ入門】GUI部品を横に並べて表示するGUIアプリを作る方法

PySimpleGUI

2021.03.292021.09.12

けんろう

PySimpleGUIでは、複数のGUI部品を、横に並べるようなレイアウトを持つGUIアプリが簡単に作れます。これにより、より自由度の高く情報量も多いGUIアプリを作ることができます。

PySimpleGUIでは、様々なGUI部品が用意されていますが、この記事では、これらGUI部品を横に並べて表示できるGUIアプリの作り方を紹介します。

この記事に載っているサンプルコードをコピーして、Pythonで実行すれば、簡単に動きを確認できますので、是非試してみて下さい。

この記事では、公式サイトから、各テーマに沿った内容を紹介しています。公式サイトは、英語で書かれており、多くの情報が載っていますが、ちょっと読みづらいです。

この記事では、初心者にもわかりやすいように、各処理の内容を、サンプルコード内にコメントとして載せています。

もう少し詳しく知りたい方は、公式サイトも見に行ってください。

The Original PySimpleGUI Cookbook - PySimpleGUI Documentation

【無料オンライン】ゼロから始めるPythonプログラミング入門講座（週5開催）テックジム

GUI部品を横に並べて表示するGUIアプリ
1. サンプルコード
まとめ

GUI部品を横に並べて表示するGUIアプリ

このサンプルコードは、
リストボックスの横に、3段からなるGUI部品を配置しています。

OKボタンを押すと、リストボックスや各テキスト入力欄に入力された値を、ポップアップ内に表示します。

サンプルコード

#!usr/bin/env python
# -*- coding: utf-8 -*-

import PySimpleGUI as sg      

sg.ChangeLookAndFeel('BlueMono')      

#　列要素レイアウト（1段目：テキスト、2段目：テキスト、テキスト入力欄、3段目：テキスト、テキスト入力欄）
col = [[sg.Text('列１', text_color='white', background_color='blue')],      
        [sg.Text('列２', text_color='white', background_color='blue'), sg.Input('列２に入力してください')],      
        [sg.Text('列３', text_color='white', background_color='blue'), sg.Input('列３に入力してください')]]      

#　レイアウト（1段目：リストボックス、列要素レイアウト、2段目：テキスト入力欄、3段目：ボタン）
layout = [
            [sg.Listbox(values=('Listbox Item 1', 'Listbox Item 2', 'Listbox Item 3'), size=(20,3)), sg.Column(col, background_color='blue')],      
            [sg.Input('なにかテキストを入力してください')],      
            [sg.OK()]
        ]

#　ウィンドウの生成と、入力待ち（二つの処理を一つにまとめて書いています）
event, values = sg.Window('　複数列を表示するサンプルアプリ', layout).Read()  

#　入力された値をポップアップで表示する。
sg.popup(event, values, line_width=200)

実行すると、

下図のようなウィンドウが立ち上がります。

リストボックスでなにかを選択したり、３つあるテキスト入力欄になにかテキストを入力して、「OK」ボタンを押すと、ポップアップが表示されます。このポップアップに、先ほど入力したテキスト等が表示されています。

ちなみに、valuesの番号は、左→右、上→下の順番で自動的にアサインされています。
今回のアプリでは、
０：リストボックス
１：列２のテキスト入力欄
２：列３のテキスト入力欄
３：ボタン上のテキスト入力欄

まとめ

今回は、Pythonライブラリである、PySimpleGUIで、GUI部品を横に並べたGUIアプリの作り方を紹介しました。

リンク