Gtk4のWidgetの装飾
Gtk4では、CSSを使用してWidgetを装飾します。このため、背景色やフォントの種類・色・サイズを変更するだけで無く、マウス状態に合わせてWidgetの表示を変更したりすることも可能です。
Gtk4でもHtmlと同じようにCSS情報は、①別のファイルに保存したり②同じファイル内に埋め込むことが可能です。多くの設定を設ける場合や同じCSS情報を複数のファイルで使用する場合には、別のファイルに保存したほうが良いのですが、少量の設定のみを指定する場合は同じファイルに埋め込む方が管理が楽になると思います。
今回は、PythonファイルにCSS情報を記入して、それを読み込んで使用する方法について紹介します。
※ CSSで装飾したGtk4プログラム
今回紹介する内容
・ PythonファイルにCSS情報を記入する
・ Gtk4にCSS情報を読み込む
CSSデータの読み込み
Gtk4にCSS情報を反映するには、以下の作業をおこないます。
- ファイル内へCSSデータを記入する
- Gtk4でCSS情報を読み込む
PythonファイルにCSS情報を記入する
CSSデータは、以下のように「変数(今回はCSS) = ”’内容 ”’」という形で記入します。
装飾するWidgetとその内容は、
「（装飾対象のWidget名） { (装飾内容): 設定値; }」のように指定します。
Gtk4のCSSを用いた装飾は、以下のページで説明しています。
装飾する対象のWidgetの指定方法についての説明ページ
装飾の指定についての説明ページ
CSS = '''
label {
font-size: 20pt;
color: blue;
background-color: burlywood;
}
window {
background-color: burlywood;
}
'''Gtk4にCSS情報を読み込む
作成したCSSデータを反映するためは、Gtk.CssProviderにCSSデータを読み込み、それをGtk.SytleContext（ウィジェットに影響を与えるスタイル情報を保存するもの）に追加します。そのために、以下の作業を行います。
1. Gtk.CssProviderを定義する。
2. 定義したGtk.CssProviderに、メソッドload_from_dataによってCSSデータを読み込ませる。
3. Gtk.StyleContextをメソッドadd_provider_for_displayで定義する。
- add_provider_for_displayの引き数はdisplay, provider, priorityです。
- displayはGdk.Display.get_default()により既存のディスプレイを指定します。
- providerには、作成したものを指定します。
- priorityには、providerの優先順位をGtk.STYLE_PROVIDER_PRIORITY_APPLICATION
などで指定します。※ リンク先にその他の値の紹介があります。
provider = Gtk.CssProvider()
provider.load_from_data(CSS, len(CSS))
Gtk.StyleContext.add_provider_for_display(
Gdk.Display.get_default(), provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)サンプルプログラム
以下のプログラムを実行すると、下図のようなウィンドウが表示されます。ウィンドウやラベルの背景色、ラベルのフォントの色はCSSで指定したものになっています。
import gi
gi.require_version('Gtk', '4.0')
from gi.repository import Gtk, Gdk, GLib
APPID = 'com.github.taniyoshima.g4_fblog_about_css_label'
CSS = '''
label {
font-size: 20pt;
color: blue;
background-color: burlywood;
}
window {
background-color: burlywood;
}
'''
class Gtk4TestTest(Gtk.Window):
def __init__(self, app):
Gtk.Window.__init__(
self, application=app, title='CSS Test1',
default_width=300, default_height=100)
provider = Gtk.CssProvider()
provider.load_from_data(CSS, len(CSS))
Gtk.StyleContext.add_provider_for_display(
Gdk.Display.get_default(), provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
box = Gtk.Box(
margin_top=20, margin_bottom=20,
margin_start=20, margin_end=20,
spacing=20,
)
label1 = Gtk.Label(label='ラベル1', hexpand=True)
label2 = Gtk.Label(label='ラベル2', hexpand=True)
box.append(label1)
box.append(label2)
self.set_child(box)
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()