目的
Gtk.HeaderBarは、Windows のカスタム タイトル バーを作成するためのウィジェットです。下図のように、Windowタイトルの左右にボタンなどを載せることが可能にします。
![](https://tannipat.blog/wp-content/uploads/2023/05/Screenshot-from-2023-05-22-15-50-45.webp)
今回は、Gtk.HeaderBarへのボタンの追加方法と押した時の処理の記述について見ていきます。
Gtk.HeaderBarの設定
Gtk.HeaderBarの設定は、プロパティやメソッドにより行います。
Gtk.HeaderBarへのWidgetの追加
Gtk.HeaerBarへのWidgetの追加には、メソッドpack_start()(Gtk.HeaerBarの左側に追加)やメソッドpack_end()(Gtk.HeaderBarの右側に追加)を使用します。
headerbar.pack_start(box)
…
headerbar.pack_end(button3)
Gtk.HeaderBarへのボタンの追加・処理の設定
Gtk.HeaderBarに載せるWidgetの動作はアクションを使用して定義します。Gtk.Buttonへのアクションの追加は、メソッドset_action_name()により行います。
アクション関係の記述方法は、Gtk.PopoverMenuBarについてを確認してください。
# 'button3'用のアクション
action = Gio.SimpleAction.new("button3_clicked", None)
action.connect("activate", self.on_button3_clicked)
self.add_action(action)
# Gtk.HeaderBarの右側に追加するWidgetの定義
# 'button3'の定義
button3 = Gtk.Button()
button3.set_icon_name('open-menu-symbolic')
button3.set_action_name('win.button3_clicked')
…
# 'button3'を選択時に実行する関数
def on_button3_clicked(self, action, param):
print('ボタン open-menu-symbolic が押されました。')
Gtk.HeaderBarのサンプルプログラム
以下のサンプルプログラムを実行すると、下図のような画面が表示されます。矢印及びメニューボタンを押すと、ターミナルにそれらのボタンを押したというコメントが発行されます。
![](https://tannipat.blog/wp-content/uploads/2023/05/Screenshot-from-2023-05-22-15-50-45.webp)
import gi
gi.require_version('Gtk', '4.0')
from gi.repository import Gtk, Gio
APPID = 'com.github.taniyoshima.g4_fblog_headerbar'
class Gtk4TestTest(Gtk.ApplicationWindow):
def __init__(self, app):
Gtk.Window.__init__(
self, application=app, title='Gtk.HeaderBar Test',
default_height=300, default_width=450)
# 'button1'用のアクション
action = Gio.SimpleAction.new("button1_clicked", None)
action.connect("activate", self.on_button1_clicked)
self.add_action(action)
# 'button2'用のアクション
action = Gio.SimpleAction.new("button2_clicked", None)
action.connect("activate", self.on_button2_clicked)
self.add_action(action)
# 'button3'用のアクション
action = Gio.SimpleAction.new("button3_clicked", None)
action.connect("activate", self.on_button3_clicked)
self.add_action(action)
# Gtk.HeaderBarの定義
headerbar = Gtk.HeaderBar()
self.set_titlebar(headerbar)
# Gtk.HeaderBarの左側に追加するWidgetの定義
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の右側に追加するWidgetの定義
button3 = Gtk.Button()
button3.set_icon_name('open-menu-symbolic')
button3.set_action_name('win.button3_clicked')
headerbar.pack_end(button3)
def on_button1_clicked(self, action, param):
print('ボタン pan-start-symbolic が押されました。')
def on_button2_clicked(self, action, param):
print('ボタン pan-end-symbolic が押されました。')
def on_button3_clicked(self, action, param):
print('ボタン open-menu-symbolic が押されました。')
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()