[Python,Gtk4] Gtk.TreeViewの使用について ③ Gtk.TreeViewにコンボボックスを表示する

目的

 前回はトグルボタンとラジオボタンの項目を追加を行いました。今回は、コンボボックスをGtk.TreeViewに追加する方法を見ます。

Gtk.TreeViewの設定

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

Gtk.TreeViewにコンボボックスを追加する

 Gtk.TreeViewにコンボボックスを載せるのには、まずGtk.CellRendererComboを定義して、それにぽプロパティを設定します。今回のプロパティの設定は、①編集可能、②modelはdata1、③modelの表示列は0、④Entryは持たないにしています。(2〜4行目)
 次に、作成したGtk.CellRendererComboを使用してGtk.TreeViewColumnを定義を行います。トグルボックスの場合、Gtk.TreeViewColumnの引数は、項目名、renderer、text=(Gtk.ListStoreの列数)になります。
 最後に、treeviewにメソッドappend_column()を使用して、Gtk.TreeViewColumnを追加します。

        renderer_combo = Gtk.CellRendererCombo()
        renderer_combo.set_property("editable", True)
        renderer_combo.set_property("model", data1)
        renderer_combo.set_property("text-column", 0)
        renderer_combo.set_property("has-entry", False)
        renderer_combo.connect("edited", self.on_combo_changed)

        column_combo = Gtk.TreeViewColumn("Combo", renderer_combo, text=1)
        treeview.append_column(column_combo)

Gtk.TreeViewのコンボボックスの更新処理

 Gtk.TreeView上のコンボボックスの更新処理は、①コンボボックスのシグナルeditedと関数on_combo_chengedを紐付けて、②on_combo_changedでGtk.ListStore(Gtk.TreeViewのmodel)の値の変更により行います。

        renderer_combo.connect("edited", self.on_combo_changed)
  …

    def on_combo_changed(self, widget, path, text):
        self.data2[path][1] = text

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

 以下のサンプルプログラムを実行すると、下図のようなGtk.TreeViewが表示されます。Gtk.TreeViewの2列目(項目’Combo’)がコンボボックスになっており、そこに表示されているデータ(Number *)をマウスでクリックすると、その部分がコンボボックスのような表示になり、再度クリックすると選択肢が表示されます。選択肢をクリックすると、クリックした選択肢に値が変わります。

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


APPID = 'com.github.taniyoshima.g4_fblog_treeview3'


class Gtk4TestTest(Gtk.Window):

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

        data1 = Gtk.ListStore(str)
        data_source = ['Number 1', 'Number 2', 'Number 3', 'Number 4']
        for item in data_source:
            data1.append([item])

        self.data2 = Gtk.ListStore(str, str)
        self.data2.append(["Data 1", "Number 1"])
        self.data2.append(["Data 2", "Number 4"])
        self.data2.append(["Data 3", "Number 3"])

        treeview = Gtk.TreeView(model=self.data2)

        renderer_text = Gtk.CellRendererText()
        column_text = Gtk.TreeViewColumn("Text", renderer_text, text=0)
        treeview.append_column(column_text)

        renderer_combo = Gtk.CellRendererCombo()
        renderer_combo.set_property("editable", True)
        renderer_combo.set_property("model", data1)
        renderer_combo.set_property("text-column", 0)
        renderer_combo.set_property("has-entry", False)
        renderer_combo.connect("edited", self.on_combo_changed)

        column_combo = Gtk.TreeViewColumn("Combo", renderer_combo, text=1)
        treeview.append_column(column_combo)

        self.set_child(treeview)

    def on_combo_changed(self, widget, path, text):
        self.data2[path][1] = text


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

17〜20行目: コンボボックスの選択肢model(data1 : Gtk.ListStore)の作成
22〜25行目: Gtk.TreeView用のmodel(self.data2 : Gtk.ListStore)作成
27行目: treeviewのmodelにself.data2をセットする。
29〜31行目: treeviewへのテキスト列の追加
33〜41行目: treeviewへのコンボボックス列の追加
45〜46行目: コンボボックスの値が選択された場合の処理

タイトルとURLをコピーしました