[Gtk.Template]Gtk.Gridの使用

XMLデータにより定義したGtk.Gridの使用

　XMLデータ（GtkBuilder UI Definition XML Document）でも、複数のWidgetを子として載せるGtk.Gridを定義することができます。Gtk.GridをXMLデータで定義する場合も、決められたルールに則り、それに載せる子Widgetを指定して、その配置（位置（列、行）、幅や高さ）を指定します。

　今回は、XMLデータでGtk.Gridを作成して、それに子Widgetを追加する方法について紹介します。

今回紹介する内容
　・ XMLデータでのGtk.Gridの作成方法
　・ XMLデータでのGtk.Gridへの子Widgetの追加方法

XMLデータでのGtk.Gridの記入

Gtk.Gridの作成方法

　Gtk.Gridの定義は、他のWidgetと同じように載せる対象の定義の<child></child>の中に記入します。そして、その中にはGtk.Gridのプロパティ(<property></property>の中に記入)や子Widgetの情報(<child></child>の中に記入)を記入します。

            <child>
                <object class="GtkGrid" id="grid">
                    <property name="hexpand">True</property>
                    <property name="margin-bottom">10</property>
                    <property name="margin-end">10</property>
                    <!-- 省略　-->
                    <child>
                    <!-- 省略　-->
                    </child>
                </object>
            </child>

Gtk.Gridへの子Widgetの追加方法

　Gtk.Gridへ追加する子Widgetは、Gtk.Boxと同じようにGtk.Girdの定義部分の中に<child></child＞に入れた形で記入します。Gtk.Boxと違いGtk.Gridでは配置を指定するので、子Widgetの記入の順番に決まりはありません。

　子Widgetを載せるGtk.Grid上の位置(列・行)や幅・高さは、<layout></layout>内にcolumn, row, column_span, row_spanの４つのプロパティを使用して記入します。4つのプロパティの内容は以下の表のとおりです。

値	内容
column	子Widgetの列位置を指定する。
row	子Widgetの行位置を指定する。
column_span	子Widgetの列幅を指定する。
row_span	子Widgetの行数を指定する。

Gtk.GridのLayoutのプロパティ

            <child>
                <object class="GtkGrid" id="grid">
                    <!-- 省略　-->
                    <child>
                        <object class="GtkLabel" id="label1">
                            <property name="label">①ボタン1</property>
　　　　　　　　　　　　　　<!-- Gridのどの位置に載せるかの指定 -->
                            <layout>
                                <property name="column">0</property>
                                <property name="row">0</property>
                            </layout>
                        </object>
                    </child>
                    <!-- 省略　-->
                </object>
            </child>

サンプルプログラム

　下のプログラムは、Gtk.Gridに２つずつGtk.LabelとGtk.Buttonを載せるプログラムです。

　プログラムを実行すると、下図のようなレイアウトのラベルとボタンを２つずつ持ったウィンドウが表示されます。各ボタンを押すと、ターミナルにボタンが押されたことを表示します。

実行方法

　下の２つのファイルを同じフォルダに保存して、そのフォルダで以下のコマンドを実行します。

python main.py

<?xml version="1.0" encoding="UTF-8"?>
<interface>
    <template class="window" parent="GtkWindow">
        <property name="default_width">300</property>
        <property name="default_height">140</property>
        <property name="title">Template Grid Test</property>
            <child>
                <object class="GtkGrid" id="grid">
                    <property name="hexpand">True</property>
                    <property name="margin-bottom">10</property>
                    <property name="margin-end">10</property>
                    <property name="margin-start">10</property>
                    <property name="margin-top">10</property>
                    <property name="column_spacing">10</property>
                    <property name="row_spacing">10</property>
                    <property name="vexpand">True</property>
                    <child>
                        <object class="GtkLabel" id="label1">
                            <property name="label">①ボタン1</property>
                            <layout>
                                <property name="column">0</property>
                                <property name="row">0</property>
                            </layout>
                        </object>
                    </child>
                    <child>
                        <object class="GtkButton" id="button1">
                            <property name="label">押す</property>
                            <signal name="clicked" handler="on_button1_clicked"/>
                            <layout>
                                <property name="column">1</property>
                                <property name="row">0</property>
                            </layout>
                        </object>
                    </child>
                    <child>
                        <object class="GtkLabel" id="label2">
                            <property name="label">②ボタン2</property>
                            <layout>
                                <property name="column">0</property>
                                <property name="row">1</property>
                            </layout>
                        </object>
                    </child>
                    <child>
                        <object class="GtkButton" id="button2">
                            <property name="label">押す</property>
                            <signal name="clicked" handler="on_button2_clicked"/>
                            <layout>
                                <property name="column">1</property>
                                <property name="row">1</property>
                            </layout>
                        </object>
                    </child>
                </object>
            </child>
    </template>
</interface>

import os
import gi
gi.require_version('Gtk', '4.0')
from gi.repository import Gtk


APPID = 'com.github.taniyoshima.g4_fblogt_grid'


@Gtk.Template(filename=os.path.dirname(__file__) + '/ui_file.ui')
class Gtk4TestTest(Gtk.Window):
    __gtype_name__ = "window"

    def __init__(self, app):
        Gtk.Window.__init__(
            self, application=app)

    @Gtk.Template.Callback()
    def on_button1_clicked(self, button):
        print('ボタン1が押されました。')

    @Gtk.Template.Callback()
    def on_button2_clicked(self, button):
        print('ボタン2が押されました。')


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()