[Python,Gtk4] Gtk.Gridの使用について

2023.04.26

Gtk.Gridについて

　Gtk.Gridでは、自身に行と列を割り振って、そこにWidgetを行および列を指定して載せます。Gtk.Gridに載せるWidgetは、復数の行や列をまたいで載せる(例：1列(column)、1行(row)の位置に幅2、高さ3を占めるWidgetを載せる)ことができます。

　今回は、Gtk.Gridの外観の指定方法と、Gtk.GridへのWidgetの載せ方について紹介します。

今回紹介する内容
　・　Gtk.Gridを作成する
　・　Gtk.Gridの外観を指定する
　・　Gtk.GridにWidgetを追加、削除する

[Gtk.Template]Gtk.Gridの使用
Gtk.GridをXMLファイルで記入する場合、Gtk.Gridに載せる子Widgetの位置やサイズは<layout></layout>内に記入します。子WidgetをGtk.Gridに載せる場合の位置やサイズの指定方法を紹介します。
tannipat.blog
2023.06.23

Gtk.Gridの作成

Gtk.Gridを作成する

　Gtk.Gridは、Gtk.Grid()と記入することで作成できます。

        grid = Gtk.Grid(
            width_request=300, height_request=200,
            margin_top=20, margin_bottom=20,
            margin_start=20, margin_end=20,
            column_spacing=30, column_homogeneous=True,
            row_spacing=30, row_homogeneous=True,
            hexpand=True, vexpand=True,
            )

Gtk.Gridの外観を指定する

　　Gtk4のGtk.Gridの外観もGtk.Boxと同じように、プロパティ（Properties）もしくはメソッド（Methods）で指定することが可能です。

　　今回のサンプルプログラムでは、プロパティを使用してGtk.Gridの外観を以下のように指定しています。
　・ width_request=300, height_request=80,　 ⇨　 要求する幅、高さの指定
　・ margin_top=20, margin_bottom=20,…margin_end　
　　⇨　Gtk.Grid周辺の余白を上、下、左、右の順に指定
　・ column_spacing=30, column_homogeneous=True,
　　⇨　列方向の隙間(column_spacing)と列方向のchildの幅を均等に割り振るか
　　　　(column_homogeneous)を指定
　・ row_spacing=30, row_homogeneous=True,
　　⇨　行方向の隙間(row_spacing)と行方向のchildの高さを均等に割り振るか
　　　　(row_homogeous)を指定
　・ hexpand=True, vexpand=True,
　　⇨　Gtk.Gridを載せたWindowに余白がある時に水平方向、垂直方向に拡張するかを指定

        grid = Gtk.Grid(
            width_request=300, height_request=200,
            margin_top=20, margin_bottom=20,
            margin_start=20, margin_end=20,
            column_spacing=30, column_homogeneous=True,
            row_spacing=30, row_homogeneous=True,
            hexpand=True, vexpand=True,
            )

Gtk.GridにWidgetを追加、削除する

　Gtk.Gridの行・列の操作やWidgetの追加削除には、以下のメソッドを使用します。サンプルプログラムでは、attach()とattach_next_to()を使用して、Widgetの追加をおこなっています。

    grid.attach(button1, 0, 0, 1, 1)
    grid.attach(button2, 1, 0, 2, 1)
    grid.attach_next_to(button3, button1, Gtk.PositionType.BOTTOM, 1, 2)
    grid.attach_next_to(button4, button3, Gtk.PositionType.RIGHT, 2, 2)
メソッド 内容
attach(child, column,
row, width, height)		childをGtk.Gridの列column,行rowの位置に、幅width、高さheightで載せる。
child: Widget
column,row, width,height: int
attach_next_to(child,
sibling, side,
width, height)		childをsiblingのsideで指定した位置に、幅width、高さheightで載せる。siblingが None の場合、childは行0 (左または右に配置する場合) または列0(上または下に配置する場合) の、side で示される最後に配置される。
child: Widget
sibling: Widget or None
side: Gtk.PositionType
column,row, width,height: int
insert_column(position)指定した位置に列を挿入する。
position: int型
insert_next_to(sibling, side)siblingのsideで指定した位置に行または列を挿入する。
sibling: Widget
side: Gtk.PositionType
insert_row(position)指定した位置に行を挿入する。
position: int型
remove(child)childを削除する。
child: Widget
remove_column(position)列を削除する。
position: int型
remove_row(position)行を削除する。
position: int型
Gtk.Gridの行・列の操作やWidgetの追加削除に関するメソッド

　side(Gtk.PositionType)に指定する値には以下のものがあります。

値 内容
Gtk.PositionType.LEFT左側を指定する。
Gtk.PositionType.RIGHT右側を指定する。
Gtk.PositionType.TOP上側を指定する。
Gtk.PositionType.BOTTOM下側を指定する。
Gtk.PositionTypeの値

サンプルプログラム

　以下のサンプルプログラムを実行すると、下図のようにGtk.Buttonを4つ載せたものが表示（Gtk.Grid使用）されます。

　各Buttonの配置と大きさ（幅、高さの占有量）：
　　Button1 : 列0、行0、幅1、高さ1
　　Button2 : 列1、行0、幅2、高さ1
　　Button3 : 列0、行1、幅1、高さ2
　　Button4 : 列1、行1、幅2、高さ2

Gtk4で作成したGtk.Gridにボタンを4つのせた画像。
import gi
gi.require_version('Gtk', '4.0')
from gi.repository import Gtk


APPID = 'com.github.taniyoshima.g4_fblog_grid'


class Gtk4TestTest(Gtk.Window):

    def __init__(self, app):
        Gtk.Window.__init__(
            self, application=app, title='Grid Test')

        grid = Gtk.Grid(
            width_request=300, height_request=200,
            margin_top=20, margin_bottom=20,
            margin_start=20, margin_end=20,
            column_spacing=30, column_homogeneous=True,
            row_spacing=30, row_homogeneous=True,
            hexpand=True, vexpand=True,
            )

        button1 = Gtk.Button(label='button1')
        button2 = Gtk.Button(label='button2')
        button3 = Gtk.Button(label='button3')
        button4 = Gtk.Button(label='button4')

        grid.attach(button1, 0, 0, 1, 1)
        grid.attach(button2, 1, 0, 2, 1)
        grid.attach_next_to(button3, button1, Gtk.PositionType.BOTTOM, 1, 2)
        grid.attach_next_to(button4, button3, Gtk.PositionType.RIGHT, 2, 2)

        self.set_child(grid)


class Gtk4TestApp(Gtk.Application):

    def __init__(self):
        Gtk.Application.__init__(self, application_id=APPID)

    def do_activate(self):
        window = Gtk4TestTest(self)
        window.present()


def main():
    app = Gtk4TestApp()
    app.run()


if __name__ == '__main__':
    main()

Gtk.Gridの外観の指定

　Gtk.Gridの設定は、15行目から22行目のGtk.Gridを定義するところで、プロパティにより行っています。
　・ width_request=300, height_request=80,(16行目) ⇨　 要求する幅及び高さの指定
　・ margin_top=20, margin_bottom=20,…(17、18行目)　⇨　Gtk.Grid周辺の余白を指定
　・ column_spacing=30, column_homogeneous=True,(19行目)
　　⇨　列方向の隙間と列方向のchildの幅を均等に割り振るかを指定
　・ row_spacing=30, row_homogeneous=True,(20行目)
　　⇨　行方向の隙間と行方向のchildの高さを均等に割り振るかを指定
　・ hexpand=True, vexpand=True,(21行目)
　　⇨　余白がある時に水平方向、垂直方向に拡張するかを指定

Gtk.GridへのChildを載せる

　Gtk.GridへGtk.Buttonを載せる作業は、29から32行目で行っています。

　最初の2行では、attachを使用して指定した行・列にGtk.Buttonを載せており、残りの２つはattach_next_to()を使用して特定のchildからの相対位置を指定してGtk.Buttonを載せています。

タイトルとURLをコピーしました