[Gtk.Template]Gtk.TreeViewの使用 Gtk.TreeViewのColumnやGtk.Cellrendertextの設定

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

 Gtk.TreeViewは、表形式で表示した一覧を表示するためのWidgetです。Gtk.TreeViewは、Gtk4.10より非推奨となりましたが、Gtk4の間は使用することが可能です。(代替Widgetは、Gtk.ColumnViewやGtk.ListViewです。) 

 Gtk.TreeViewでは、データの作成にGtk.ListStore、Gtk.TreeViewの列の作成にGtk.TreeViwColumnやGtk.Cellrendertextを使用しますが、これらのWidgetもXMLデータで作成することが可能です。

 今回は、XMLデータでGtk.TreeViewにデータの追加や列情報を指定をおこなう方法を紹介します。

今回紹介する内容
 ・ XMLデータで、Gtk.TreeView用のデータ(Gtk.ListStore)を作成する
 ・ XMLデータで、Gtk.TreeViewで使用するデータを指定する
 ・ XMLデータで、Gtk.TreeViewの列を作成する

その他の[Gtk.Template]Gtk.TreeViewの記事

代替Widgetの説明記事

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

XMLデータで、Gtk.TreeView用のデータ(Gtk.ListStore)を作成する

 Gtk.TreeView用のデータは、XMLデータ内では以下のように</template>の後に記入します。<column></column>内にデータの型(Glibで定義されたもの)を記入し、<data></data>内に1つのデータごとに<row></row>内にまとめて記入します。<col>内のidには、データの型を定義した順番を0からの数字を書きます。

    </template>
    <object class="GtkListStore" id="store">
        <columns>
            <column type="gint"/>
            <column type="gchararray"/>
            <column type="gchararray"/>
        </columns>
        <data>
            <row>
                <col id="0">0</col>
                <col id="1">Data1</col>
                <col id="2">Data Num1</col>
            </row>
            <row>
                <col id="0">1</col>
                <col id="1">Data2</col>
                <col id="2">Data Num2</col>
            </row>
            <row>
                <col id="0">2</col>
                <col id="1">Data3</col>
                <col id="2">Data Num3</col>
            </row>
        </data>
    </object>

XMLデータで、Gtk.TreeViewで使用するデータを指定する

 Gtk.TreeViewのデータの指定は、Gtk.TreeViewのプロパティmodelに、Gtk.ListStoreを作成した時に指定したid名を記入することでおこないます。

            <object class="GtkTreeView" id="treeview">
                <property name="model">store</property>
        # 省略
            </object>

XMLデータで、Gtk.TreeViewの列を作成する

 Gtk.TreeViewの列の設定は、Gtk.TreeViewの<child></child>内にGtkTreeViewColumnの内容を記入し、その中の<child></child>内にGtkCellRenderTextの内容を記入することでおこないます。

            <object class="GtkTreeView" id="treeview">
                <property name="model">store</property>
                <child>
                    <object class="GtkTreeViewColumn" id="gtviewcolumn1">
                        <property name="title">int</property>
                        <child>
                            <object class="GtkCellRendererText" id="cellrendertext1"/>
                            <attributes>
                                <attribute name="text">0</attribute>
                            </attributes>
                        </child>
                    </object>
                </child>
        # 省略
            </object>

サンプルプログラム

 以下のサンプルプログラムを実行すると図のようなGtk.TreeViewが表示されます。Gtk.TreeViewのデータをクリックすると、クリックした行のデータがターミナルに表示されます。

Gtk.Templateを使用したGtk.TreeView

実行方法

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

python main.py
<?xml version="1.0" encoding="UTF-8"?>
<interface>
    <template class="window" parent="GtkWindow">
        <property name="default_width">500</property>
        <property name="default_height">250</property>
        <property name="title">Template Gtk.CellRenderText Test</property>
        <child>
            <object class="GtkTreeView" id="treeview">
                <property name="model">store</property>
                <child>
                    <object class="GtkTreeViewColumn" id="gtviewcolumn1">
                        <property name="title">int</property>
                        <child>
                            <object class="GtkCellRendererText" id="cellrendertext1"/>
                            <attributes>
                                <attribute name="text">0</attribute>
                            </attributes>
                        </child>
                    </object>
                </child>
                <child>
                    <object class="GtkTreeViewColumn" id="gtviewcolumn2">
                        <property name="title">text1</property>
                        <child>
                            <object class="GtkCellRendererText" id="cellrendertext2"/>
                            <attributes>
                                <attribute name="text">1</attribute>
                            </attributes>
                        </child>
                    </object>
                </child>
                <child>
                    <object class="GtkTreeViewColumn" id="gtviewcolumn3">
                        <property name="title">text2</property>
                        <child>
                            <object class="GtkCellRendererText" id="cellrendertext3"/>
                            <attributes>
                                <attribute name="text">2</attribute>
                            </attributes>
                        </child>
                    </object>
                </child>
            </object>
        </child>
    </template>
    <object class="GtkListStore" id="store">
        <columns>
            <column type="gint"/>
            <column type="gchararray"/>
            <column type="gchararray"/>
        </columns>
        <data>
            <row>
                <col id="0">0</col>
                <col id="1">Data1</col>
                <col id="2">Data Num1</col>
            </row>
            <row>
                <col id="0">1</col>
                <col id="1">Data2</col>
                <col id="2">Data Num2</col>
            </row>
            <row>
                <col id="0">2</col>
                <col id="1">Data3</col>
                <col id="2">Data Num3</col>
            </row>
        </data>
    </object>
</interface>
import os
import gi
gi.require_version('Gtk', '4.0')
from gi.repository import Gtk


APPID = 'com.github.taniyoshima.g4_fblogt_cellrendertext'


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

    store = Gtk.Template.Child()

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

    @Gtk.Template.Callback()
    def on_cursor_changed(self, treeview):
        treeselection = treeview.get_selection()
        model, iter = treeselection.get_selected()
        if iter:
            print(
                model.get_value(iter, 0),
                model.get_value(iter, 1),
                model.get_value(iter, 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()
タイトルとURLをコピーしました