[Gtk.Template]Gtk.SpinButtonの使用 Gtk.Adjustmentの指定

XMLデータにより定義したGtk.SpinButtonの記入

 Gtk.SpinButtonは、ユーザーが数値を選択するのに使用するWidgetです。Gtk.SpinButtonの範囲等の指定は、Gtk.Adjustmentで行います。Gtk.AdjustmentはGtk.SpinButtonのようにWidgetに載せるのではなく、プロパティadjustmentによって指定するものなので、XMLデータで記入する場合は、<template></template>の他の場所に記入します。そして、Gtk.SpinButton側でGtk.Adjustmentを指定することで、Gtk.SpinButtonの動作にGtk.Adjustmentの設定が反映されます。

 今回は、XMLデータでGtk.SpinButtonの作成方法とその動作を指定するGtk.Adjustmentの作成と指定方法を紹介します。

今回紹介する内容
 ・ XMLデータでGtk.Adjustmentを作成する
 ・ XMLデータでGtk.SpinButtonを作成する
 ・ XMLデータでGtk.SpinButtonの使用するGtk.Adjustmentを指定する

XMLデータでのGtk.SpinButtonの作成

XMLデータでGtk.Adjustmentを作成する

 Gtk.Adjustmentの内容は、</template>の後に以下のように<object class=”GtkAdjustment” id=”id名”></object>の中にプロパティを使用して以下のように記入します。

 idで指定する値が、Gtk.SpinButtonの動作を指定するプロパティadjustmentの指定で使用するものになります。

<?xml version="1.0" encoding="UTF-8"?>
<interface>
    <template class="window" parent="GtkWindow">
    <!-- 省略 -->
    </template>
    <object class="GtkAdjustment" id="adjust">
        <property name="lower">0.1</property>
        <property name="step-increment">0.1</property>
        <property name="page-increment">1.0</property>
        <property name="upper">10.0</property>
        <property name="value">0.5</property>
    </object>
</interface>

XMLデータでGtk.SpinButtonを作成する

 XMLデータでGtk.SpinButtonを作成する場合は、それを載せるWidgetの<child></child>の中に <object class=”GtkSpinButton” ></object>と記入して、その中にプロパティやレイアウトを記入します。

                    <child>
                        <object class="GtkSpinButton" id="sbutton">
                          # 省略
                        </object>
                    </child>
                </object>

XMLデータでGtk.SpinButtonの使用するGtk.Adjustmentを指定する

 Gtk.SpinButtonが使用するGtk.Adjustmentの指定には、Gtk.Adjustmentのid名を使用して、以下のように記入します。

                    <child>
                        <object class="GtkSpinButton" id="sbutton">
                            <property name="adjustment">adjust</property>
                            <property name="digits">1</property>
                            <layout>
                                <property name="column">1</property>
                                <property name="row">4</property>
                                <property name="column_span">2</property>
                            </layout>
                        </object>
                    </child>
                </object>

サンプルプログラム

 以下のサンプルプログラムを実行すると図のようなスピンボタンが表示されます。

実行方法

 下の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 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="label5">
                            <property name="label">スピンボタン</property>
                            <property name="xalign">0.0</property>
                            <property name="width_request">230</property>
                            <layout>
                                <property name="column">0</property>
                                <property name="row">4</property>
                            </layout>
                        </object>
                    </child>
                    <child>
                        <object class="GtkSpinButton" id="sbutton">
                            <property name="adjustment">adjust</property>
                            <property name="digits">1</property>
                            <layout>
                                <property name="column">1</property>
                                <property name="row">4</property>
                                <property name="column_span">2</property>
                            </layout>
                        </object>
                    </child>
                </object>
            </child>
    </template>
    <object class="GtkAdjustment" id="adjust">
        <property name="lower">0.1</property>
        <property name="step-increment">0.1</property>
        <property name="page-increment">1.0</property>
        <property name="upper">10.0</property>
        <property name="value">0.5</property>
    </object>
</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_file2.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をコピーしました