[Python,Gtk4] Gtk.TreeViewの使用について② Gtk.TreeViewにトグルボタンやラジオボタンを表示する

 Gtk.TreeViewにトグルボックスを載せるのには、まずGtk.CellRendererToggleを定義します。
 次に、作成したGtk.CellRendererToggleを使用してGtk.TreeViewColumnを定義を行います。トグルボックスの場合、Gtk.TreeViewColumnの引数は、項目名、renderer、active=(Gtk.ListStoreの列数)になります。
 最後に、treeviewにメソッドappend_column()を使用して、Gtk.TreeViewColumnを追加します。

 また、トグルボタンを変更した場合に実行する関数の指定は、renderer_toggle.connect(“toggled”, self.on_cell_toggled)により行います。

        renderer_toggle = Gtk.CellRendererToggle()
        renderer_toggle.connect("toggled", self.on_cell_toggled)

        column_toggle = Gtk.TreeViewColumn("Toggle", renderer_toggle, active=1)
        treeview.append_column(column_toggle)

トグルボタンが選択された場合の処理

 トグルボタンが選択された場合は以下のように、選択した項目の位置(path)を取得して、その位置のself.liststoreの値を反転(True ⇔ False)させます。

    def on_cell_toggled(self, widget, path):
        self.liststore[path][1] = not self.liststore[path][1]

ラジオボタンを追加する

 ラジオボタンは、トグルボタンと同じくGtk.CellRendererToggle()により作成して、それにrenderer_radio.set_radio(True)を指定することで作成します。

        renderer_radio = Gtk.CellRendererToggle()
        renderer_radio.set_radio(True)
        renderer_radio.connect("toggled", self.on_cell_radio_toggled)

        column_radio = Gtk.TreeViewColumn("Radio", renderer_radio, active=2)
        treeview.append_column(column_radio)

ラジオボタンが選択された場合の処理

 ラジオボタンが選択された場合は以下のように、選択した項目の位置(path)を取得してGtk.TreePath(path)により、Gtk.TreePathを定義します。
 self.liststoreの各行に対して、Gtk.TreePath(path)とrow.pathの値が一致するかを確認して、一致する場合はrow[2]にTrueを、一致しない場合はrow[2]にFalseを入れます。
 ※ row[2]はself.liststoreの各行の2列目なので、上記の処理によってself.liststoreの各行の2列目の値が変更されます。

    def on_cell_radio_toggled(self, widget, path):
        selected_path = Gtk.TreePath(path)
        for row in self.liststore:
            row[2] = row.path == selected_path

Gtk.TreeViewに表示されたデータの取得

 Gtk.TreeViewのデータの取得は、Gtk.TreeViewのmodelであるGtk.ListStoreより取得します。下記のプログラムでは、Gtk.ListStoreから1行ずつデータをリストで取得しています。

    def on_button_clicked(self, button):
        print('現在のデータ:')
        for row in self.liststore:
            print(row[:])

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

 以下のサンプルプログラムを実行すると、下図のようなGtk.TreeViewとGtk.Button(ラベルが「データ取得」のボタン)が表示されます。Gtk.TreeViewの2列目(項目’Toggle’)がトグルボタン、3列目(項目’Radio’)がラジオボタンになっています。
 「データ取得」ボタンを押すと、Gtk.TreeView上の各値を取得してターミナルに表示します。

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


APPID = 'com.github.taniyoshima.g4_fblog_treeview2'

class Gtk4TestTest(Gtk.Window):

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

        self.liststore = Gtk.ListStore(str, bool, bool)
        self.liststore.append(["Data 1", False, True])
        self.liststore.append(["Data 2", True, False])
        self.liststore.append(["Data 3", False, False])
        self.liststore.append(["Data 4", False, False])

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

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

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

        renderer_toggle = Gtk.CellRendererToggle()
        renderer_toggle.connect("toggled", self.on_cell_toggled)

        column_toggle = Gtk.TreeViewColumn("Toggle", renderer_toggle, active=1)
        treeview.append_column(column_toggle)

        renderer_radio = Gtk.CellRendererToggle()
        renderer_radio.set_radio(True)
        renderer_radio.connect("toggled", self.on_cell_radio_toggled)

        column_radio = Gtk.TreeViewColumn("Radio", renderer_radio, active=2)
        treeview.append_column(column_radio)

        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):
        print('現在のデータ:')
        for row in self.liststore:
            print(row[:])

    def on_cell_toggled(self, widget, path):
        self.liststore[path][1] = not self.liststore[path][1]

    def on_cell_radio_toggled(self, widget, path):
        selected_path = Gtk.TreePath(path)
        print(type(selected_path))
        for row in self.liststore:
            row[2] = row.path == selected_path


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

16〜20行目: self.liststoreへのデータの追加
29行目:   treeviewのmodelにself.liststoreをセットする。
31〜33行目: treeviewへのテキスト列の追加
35〜39行目: treeviewへのトグルボタン列の追加
41〜46行目: treeviewへのラジオボタン列の追加
56〜59行目:  treeviewに表示しているデータの取得処理
61〜62行目: トグルボタンを押した場合の処理
64〜68行目: ラジオボタンを押した場合の処理

まとめ

  • Gtk.TreeViewで使用するトグルボタンやラジオボタンの定義には、Gtk.CellRendererToggle()を使用します。
  • Gtk.TreeViewで使用するラジオボタンは、メソッドset_radio()により指定します。
  • トグルボタンやラジオボタンの変更した場合の動作について、関数で定義します。
  • Gtk.TreeViewに表示したデータは、そのmodel(Gtk.ListStore)から取得します。

 次回の予定

 次回は、Gtk.TreeViewにコンボボックスを載せる方法を見ます。

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