[Gtk.Template]Gtk.ToggleButton、Gtk.CheckButton XMLデータでのグループ化(ラジオボタンとして使用)

Gtk.ToggleButtonやGtk.CheckButtonのXMLデータでの作成とグループ化

 Gtk.ToggleButtonやGtk.CheckButtonにはグループ化を行いラジオボタンのように動作させる機能があります。Python側でUIを作成する場合はグループ化を行うのにプロパティgroupを使用しますが、XMLデータ(GtkBuilder UI Definition XML Document)で作成する場合は、groupを使用できないので他の方法で指定する必要があります。

 今回は、XMLデータでGtk.ToggleButtonやGtk.CheckButtonを作成する方法に加えて、グループを作成するする方法について紹介します。

今回紹介する内容
 ・ XMLデータでのGtk.ToggleButtonやGtk.CheckButtonの作成方法
 ・ XMLデータでのGtk.ToggleButtonやGtk.CheckButtonのグループの作成方法

XMLデータでのGtk.ToggleButtonやGtk.CheckButtonの作成方法

 XMLデータでGtk.ToggleButtonやGtk.CheckButtonを作成する場合は、他のWigetと同じように載せるWidgetの<child></child>の間に、その情報を記入します。

                    <child>
                        <object class="GtkToggleButton" id="tbutton1">
                            <property name="label">トグル1</property>
                            <layout>
                                <property name="column">0</property>
                                <property name="row">0</property>
                            </layout>
                        </object>
                    </child>

XMLデータでのGtk.ToggleButtonやGtk.CheckButtonのグループの作成方法

 XMLデータでGtk.ToggleBottonやGtk.CheckButtonをグループ化するには、グループ化する2つ目以降のWidgetに対してプロパティgroupを記入します。そして、その値には、最初に作成したWidgetのidの値を記入します。

 下の例は、id:tbutton1とid:tbutton2のGtk.ToggleButtonをグループ化しているものであり、tbutton2の方で、<property name=”group”>tbutton1</property>と記入して、tbutton1とのグループ化を指定しています。

                    <child>
                        <object class="GtkToggleButton" id="tbutton1">
                            <property name="label">トグル1</property>
                            <layout>
                                <property name="column">0</property>
                                <property name="row">0</property>
                            </layout>
                        </object>
                    </child>
                    <child>
                        <object class="GtkToggleButton" id="tbutton2">
                            <property name="label">トグル2</property>
                            <property name="group">tbutton1</property>
                            <property name="active">True</property>
                            <layout>
                                <property name="column">1</property>
                                <property name="row">0</property>
                            </layout>
                        </object>
                    </child>

サンプルプログラム

 以下のサンプルプログラムを実行すると図のように3つのトグルボタンが表示されます。これらのトグルボタンはグループ化されており、ラジオボタンのように動作します。

実行方法

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

python main.py
<?xml version="1.0" encoding="UTF-8"?>
<interface>
    <template class="window" parent="GtkWindow">
        <property name="default_width">600</property>
        <property name="default_height">250</property>
        <property name="title">Template Gtk.CheckButton 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="GtkToggleButton" id="tbutton1">
                            <property name="label">トグル1</property>
                            <layout>
                                <property name="column">0</property>
                                <property name="row">0</property>
                            </layout>
                        </object>
                    </child>
                    <child>
                        <object class="GtkToggleButton" id="tbutton2">
                            <property name="label">トグル2</property>
                            <property name="group">tbutton1</property>
                            <property name="active">True</property>
                            <layout>
                                <property name="column">1</property>
                                <property name="row">0</property>
                            </layout>
                        </object>
                    </child>
                    <child>
                        <object class="GtkToggleButton" id="tbutton3">
                            <property name="label">トグル3</property>
                            <property name="group">tbutton1</property>
                            <layout>
                                <property name="column">2</property>
                                <property name="row">0</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_togglebutton'


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


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()
タイトルとURLをコピーしました