[Python,Gtk4] Gtk.HeaderBarの使用について② ヘッダーバーへのメニューの追加

目的

　Gtk.HeaderBarの右側には、’open-menu-symbolic’（横三本線）が設置されることが多く、それを左クリックするとメニュー（Gtk.Popover）を表示するプログラムが多く存在します。

　今回は、Gtk.HeaderBarに設置したボタンをクリックした場合に、Gtk.Popoverを表示する方法を見ていきます。

Gtk.HeaderBarのボタンを押すとGtk.Popoverを表示

Gtk.MenuButtonの作成

　押した場合にGtk.Popoverを表示させるために、Gtk.HeaderBarに設置するボタンはGtk.MenuButtonで作成します。Gtk.MenuButtonは、プロパティpopoverでクリック時に表示するGtk.Popoverを、プロパティicon_nameでアイコンを指定します。

        # Gtk.Popoverを紐付けるGtk.MenuButtonの作成
        hamburger_button = Gtk.MenuButton(
            popover=self.popover,
            icon_name='open-menu-symbolic'
        )

Gtk.Popoverのメニューの作成

　Gtk.Popoverの定義では、以下のようにプロパティchildを使用してGtk.Popoverに載せるWidgetを指定します。

        # Gtk.HeaderBarに追加するGtk.Popoverに載せるものの作成
        hambuger_menu = Gtk.Box(
            orientation=Gtk.Orientation.VERTICAL,
            spacing=10
        )
        hambager_button = Gtk.Button(
            action_name='app.about',
            label='バージョン情報',
            has_frame=False,
            receives_default=True
        )
        hambuger_menu.append(hambager_button)

        # Gtk.Popoverの作成
        self.popover = Gtk.Popover(
            position=Gtk.PositionType.BOTTOM,
            child=hambuger_menu
        )

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

　　以下のサンプルプログラムを実行すると、下図のような画面が表示されます。’open-menu-symbolic’（横三本線）のボタンを押すと、ポップアップが表示され、その中の’バージョン情報’を選択するとGtk.AboutDialogが表示されます。

Gtk.AboutDialogに使用するアイコン画像（下のSmple Iconと表示した画像）
サンプルプログラムと同じフォルダに保存してから実行してください

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


APPID = 'com.github.taniyoshima.g4_fblog_headerbar2'


class Gtk4TestTest(Gtk.ApplicationWindow):

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

        action = Gio.SimpleAction.new("button1_clicked", None)
        action.connect("activate", self.on_button1_clicked)
        self.add_action(action)

        action = Gio.SimpleAction.new("button2_clicked", None)
        action.connect("activate", self.on_button2_clicked)
        self.add_action(action)

        headerbar = Gtk.HeaderBar()
        self.set_titlebar(headerbar)

        box = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL)

        button1 = Gtk.Button.new_from_icon_name(
            'pan-start-symbolic')
        button1.set_action_name('win.button1_clicked')
        box.append(button1)

        button2 = Gtk.Button.new_from_icon_name(
            'pan-end-symbolic')
        button2.set_action_name('win.button2_clicked')
        box.append(button2)

        headerbar.pack_start(box)

        # Gtk.HeaderBarに追加するGtk.Popoverに載せるものの作成
        hambuger_menu = Gtk.Box(
            orientation=Gtk.Orientation.VERTICAL,
            spacing=10
        )
        hambager_button = Gtk.Button(
            action_name='app.about',
            label='バージョン情報',これらは、メソッドを使用しても指定できます。
            has_frame=False,
            receives_default=True
        )
        hambuger_menu.append(hambager_button)

        # Gtk.MenuButtonにGtk.Popoverを紐付け
        self.popover = Gtk.Popover(
            position=Gtk.PositionType.BOTTOM,
            child=hambuger_menu
        )

        hamburger_button = Gtk.MenuButton(
            popover=self.popover,
            icon_name='open-menu-symbolic'
        )
        headerbar.pack_end(hamburger_button)

    def on_button1_clicked(self, action, param):
        print('ボタン pan-start-symbolic が押されました。')

    def on_button2_clicked(self, action, param):
        print('ボタン pan-end-symbolic が押されました。')


class Gtk4TestApp(Gtk.Application):

    def __init__(self):
        Gtk.Application.__init__(self, application_id=APPID)

    def do_startup(self):
        Gtk.Application.do_startup(self)

        # 'バージョン情報'用のアクション
        action = Gio.SimpleAction.new("about", None)
        action.connect("activate", self.on_about)
        self.add_action(action)

    def do_activate(self):
        self.window = Gtk4TestTest(self)
        self.window.present()

    # アクションaboutの処理
    def on_about(self, action, param):
        # popoverの非表示
        self.window.popover.set_visible(False)

        # Gtk.AboutDialogの設定
        icon = Gtk.Picture.new_for_filename('icon.png').get_paintable()
        dialog = Gtk.AboutDialog(
            modal=True,
            authors=['taniyoshima'],
            comments='AboutDialogのサンプル',
            license_type=Gtk.License.MIT_X11,
            version='1.0.0',
            program_name='Gtk.AboutDialog Test',
            logo=icon,
        )

        dialog.present()


def main():
    app = Gtk4TestApp()
    app.run()


if __name__ == '__main__':
    main()

まとめ

押した場合にGtk.Popoverを表示するボタンは、Gtk.MenuButtonを使用して作成します。
Gtk.Popoverに載せるWidgetは、プロパティchildで指定します。

　次回の予定

　次回は、Gtk.AboutDialogについて見ていきます。