[Python,Gtk4] Gtk.TreeViewの使用について Gtk.TreeViewにテキストを表示する

目的

　Gtk.TreeViewは、Gtk4.10より非推奨となったWidgetですが、Gtk4では利用し続けることが可能なので、その使い方を見ていきます。代替Widgetは、Gtk.ListVieｗもしくはGtk.ColumnViewです。

　Gtk.TreeViewもGtk.ComboBoxと同じように、Gtk.ListStoreを使用して表示するものを定義します。そのデータを表示するGtk.TreeViewの列は、データがテキストの場合はGtk.CellRenderTextとGtk.TreeViewColumnを使用して指定します。

　今回は、①Gtk.TreeViewにテキストデータを表示する方法と②Gtk.TreeViewにデータを追加する方法（データの最後に追加）を見ます。

Gtk.TreeViewの設定

　Gtk.TreeViewの外観や動作、項目の操作は、プロパティやメソッドを使用して指定します。

Gtk.TreeView用のデータ作成（Gtk.ListStore）

　Gtk.TreeViewもGtk.ComboBoxと同じように、Gtk.ListStoreを使用してデータを作成します。今回使用するGtk.ListStoreは、[int型、str型、str型]のデータなので、以下のように定義して、リストdataの値をGtk.ListStoreに追加しました。

        self.liststore = Gtk.ListStore(int, str, str)
        for data_ref in data:
            self.liststore.append(list(data_ref))

Gtk.TreeViewにデータを追加する（テキストデータ）

　Gtk.TreeViewを使用するには、①データ(Gtk.ListStore)の追加と②列の設定をする必要が有ります。

データの指定

　Gtk.TreeViewへのデータの指定は、Gtk.TreeViewの定義時にプロパティmodelにより作成したGtk.ListStoreを指定することでおこないます。Gtk.TreeViewの定義後に、メソッドset_modelによっても指定できます。

    treeview = Gtk.TreeView(model=self.liststore, vexpand=True)

列の設定（テキストデータ）

　Gtk.TreeViewの列の設定は、以下の手順で行います。
　①Gtk.CellRendererTextを定義する。
　②Gtk.TreeViewColumn()に指定して定義する。
　　列のタイトル（column_title）とGtk.CellRenderText、
　　rendererの属性とリストの列数（text=i）を指定する。
　③columnをメソッドappend_column()により、treeviewの列のリストに追加する。

            renderer = Gtk.CellRendererText()
            column = Gtk.TreeViewColumn(column_title, renderer, text=i)
            treeview.append_column(column)

　Gtk.TreeViewColumnの定義部分の書き方は、PyObject API ReferenceのGtk.TreeViewColumnには無く、The Python Gtk+3 Tutolialのプログラムを参考にしたものです。同じ処理をメソッドやプロパティで実行するのであれば、以下のようになります。

            column = Gtk.TreeViewColumn(title=column_title)
            column.pack_start(renderer, True)
            column.add_attribute(renderer, "text", i)

リストのデータを項目に追加

　サンプルプログラムではリストから項目名を取得しているのですが、その時、Pythonのenumerate()関数を使って、項目名と一緒にその値がリストの何番目の値であるかの情報も取得しています。
　取得した値をそれぞれiとcolumn_titleに代入して、それらの値でGtk.TreeViewの列の設定を行っています。

    for i, column_title in enumerate(['No', 'Data', 'Number']):
        renderer = Gtk.CellRendererText()
        column = Gtk.TreeViewColumn(column_title, renderer, text=i)
        treeview.append_column(column)

Gtk.TreeViewの表示後にデータを追加する

　Gtk.TreeViewへのデータの追加は、Gtk.ListStoreにメソッドappend()を使用して追加します。この処理を行うと、直ちにGtk.TreeViewの表示に反映されます。
　※ 他にもGtk.ListStoreのデータを操作するメソッドがあります。

self.liststore.append([4, 'Data 4', 'Number 4'])

Gtk.TreeViewの選択した行のデータを取得する（1個のみ選択）

　Gtk.TreeViewで選択されている項目の情報の取得は以下の手順で行います。
　　1.　Gtk.TreeViewのメソッドget_selection()を使用して、Gtk.TreeViewから選択している項目
　　　（Gtk.TreeSelection)を取得します。
　　2.　Gtk.TreeSelectionのメソッドget_selected()により、model（Gtk.TreeModel）と
　　　　iter（Gtk.Iter）を取得します。
　　　　modelは、Gtk.TreeViewのmodelであり、iterはそのmodelのうち選択された行情報
　　　　を示します。
　　3. 　model.get_value(iter, 列番号)により、選択した行の指定した列の値を取得します。
　　※ if iter: により、項目が選択していることを確認しています。

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

Gtk.TreeViewのサンプルプログラム

　以下のサンプルプログラムを実行すると、下図のようなGtk.TreeViewとGtk.Button（ラベルが「追加」のボタン）が表示されます。そして、追加ボタンを押す度に、Gtk.ListStoreにデータ[4, ‘Data 4’, ‘Number 4’]が追加され、それがGtk.TreeViewの表示に反映されます。

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


APPID = 'com.github.taniyoshima.g4_fblog_treeview'


data = [
    (1, 'Data 1', 'Number 1'),
    (2, 'Data 2', 'Number 2'),
    (3, 'Data 3', 'Number 3'),
]


class Gtk4TestTest(Gtk.Window):

    def __init__(self, app):
        Gtk.Window.__init__(
            self, application=app, title='Gtk.TreeView Test',
            default_width=300, default_height=300
        )

        box = Gtk.Box(
            orientation=Gtk.Orientation.VERTICAL, spacing=20,
            margin_top=20, margin_bottom=20,
            margin_start=20, margin_end=20
        )

        self.liststore = Gtk.ListStore(int, str, str)
        for data_ref in data:
            self.liststore.append(list(data_ref))

        treeview = Gtk.TreeView(model=self.liststore, vexpand=True)
        treeview.connect('cursor_changed', self.on_cursor_changed)

        for i, column_title in enumerate(['No', 'Data', 'Number']):
            renderer = Gtk.CellRendererText()
            # column = Gtk.TreeViewColumn(column_title, renderer, text=i)
            column = Gtk.TreeViewColumn(title=column_title)
            column.pack_start(renderer, False)
            column.add_attribute(renderer, "text", i)
            treeview.append_column(column)

        button = Gtk.Button(label="追加")
        button.connect('clicked', self.on_button_clicked)

        box.append(treeview)
        box.append(button)
        self.set_child(box)

    def on_button_clicked(self, button):
        self.liststore.append([4, 'Data 4', 'Number 4'])

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

30〜32行目　データdataのListStoreへの登録
34行目　Gtk.TreeViewの定義　modelにself.storeを登録します。
37〜40行目　Gtk.TreeViewの列の設定
49〜50行目　関数on_button_clickedの定義
　self.liststoreにデータ[4, ‘Data 4’, ‘Number 4’]を追加します。
55〜62行目　項目を選択した場合に、ターミナルに項目情報を表示する処理

まとめ

Gtk.TreeViewに表示するデータは、Gtk.ListStoreで作成します。
Gtk.TreeViewに表示するデータの指定は、プロパティmodelやメソッドset_modelによっておこないます。
Gtk.TreeViewに表示するデータがテキストの場合、列の作成をGtk.CellRendererText()とGtk.TreeViewColumn()で行い、それをメソッドappend_column()によりGtk.TreeVIewに追加します。
Gtk.TreeViewに表示するデータの編集は、Gtk.ListStoreを操作することにより行います。

　次回の予定

　次回は、Gtk.TreeViewにチェックボタンやラジオボタンを載せる方法を見ます。