Pythonで作るGUIアプリ入門 Part19 -レイアウト分割の設定-
レイアウト分割の設定
レイアウトを複数のコンテナ要素で縦に分割する事が出来ます。この時は、layout = [[ sg.Column(layout1), sg.Column(layout2)]]のように設定します。sg.Column(layout)のlayoutに、レイアウトを設定します。コンテナは、２つ以上設置出来ます。また、() をsg.Column()の後に設定すると垂直の仕切り線を表示させる事が出来ます。
図19-1に示すようなレイアウトをコンテナで３分割したウィンドウを作成して、レイアウト分割を理解しましょう。
コードは、以下の通りです。
import PySimpleGUI as sg
left_col = [
[sg.Text('左側のコンテナ')],
[sg.Multiline('', key='-l_container-', size=(35, 10))],
]
center_col = [
[sg.Text('中央のコンテナ')],
[sg.Multiline('', key='-c_container-', size=(25, 5))],
]
right_col = [
[sg.Text('右側のコンテナ')],
[sg.Multiline('', key='-r_container-', size=(35, 10))],
]
layout = [[sg.Column(left_col, element_justification='c'),
sg.VSeperator(color='#eeeeee'),
sg.Column(center_col, element_justification='c'),
sg.Column(right_col, element_justification='c')]]
window = sg.Window('レイアウトの分割', layout)
while True:
event, value = window.read() # イベント入力を待つ
if event is None:
break
window.close()レイアウトの設定
まずは、各コンテナのレイアウトを設定します。左側、中央、右側のコンテナレイアウトをそれぞれleft_col、center_col、right_colとして設定します。それぞれ、テキストとマルチラインウィジェットが設置されたシンプルなコンテナです。マルチラインウィジェットのサイズは、それぞれ違う値を設定しています。
left_col = [
[sg.Text('左側のコンテナ')],
[sg.Multiline('', key='-l_container-', size=(35, 10))],
]
center_col = [
[sg.Text('中央のコンテナ')],
[sg.Multiline('', key='-c_container-', size=(25, 5))],
]
right_col = [
[sg.Text('右側のコンテナ')],
[sg.Multiline('', key='-r_container-', size=(35, 10))],
]
次にメインウィンドウのレイアウト設定となります。
1行目では、 (left_col, element_justification='c')として左側のコンテナを設置し、element_justification='c'でウィジェットを中央揃えにしています。
2行目では、sg.VSeperator(color='#eeeeee')として垂直の区切り線をカラーコード＝#eeeeeeを指定して設置しています。
3行目、4行目ではそれぞれの中央と右側のコンテナを設定しています。
layout = [[sg.Column(left_col, element_justification='c'),
sg.VSeperator(color='#eeeeee'),
sg.Column(center_col, element_justification='c'),
sg.Column(right_col, element_justification='c')]]このレイアウトをウィンドウに指定して、３分割されたレイアウトを表示させます。
window = sg.Window('レイアウトの分割', layout)以上のようにレイアウトをコンテナで分割する事が出来ます。
図19-2のレイアウトも同様の方法で分割を実施しています。
GUIアプリ入門講座は毎日更新します！
記事が参考になりましたら、❤️を押していただけると励みになります😊