ClutterStage が現在 Wayland で使えないのはあきらめて。
当面は GtkClutter を使ったサンプルコードを書いていこう。
今回は ClutterActor のレイアウトマネージャ。
GTK+ と全然違い property の layout-manager で指定するようだ。
デフォルトは ClutterFixedLayout になっている。
書くまでもなく絶対値配置なので子 Actor は重なって表示される。
GtkBox のように並べて配置するには ClutterBoxLayout を指定。
clutter_actor_add_child するだけで普通に並んでいく。
#!/usr/bin/gjs
const Clutter = imports.gi.Clutter;
const GtkClutter = imports.gi.GtkClutter;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
const ListTest = new Lang.Class({
Name: 'ListTest',
Extends: Gtk.Window,
_init: function() {
this.parent({
title: "add_actor"
});
// BoxLayout
let layout = new Clutter.BoxLayout({
orientation: Clutter.Orientation.VERTICAL,
spacing: 1
});
// Actor
this.actor = new Clutter.Actor({
layout_manager: layout
});
// add
let girls = ["椎名心実です", "あかね！", "くおえうえーーーうえうぅぅぅ"];
for (let i=0; i<girls.length; i++) {
let item = new Clutter.Text({
x_align: Clutter.ActorAlign.START,
x_expand: true,
text: girls[i]
});
this.actor.add_child(item);
}
// Embed
let embed = new GtkClutter.Embed();
let stage = embed.get_stage();
stage.add_child(this.actor);
this.add(embed);
// this
this.connect("hide", Gtk.main_quit);
this.show_all();
}
});
GtkClutter.init(null);
new ListTest();
Gtk.main();
GListModel を使ってバインドもできる。
頻繁に入れ替えを行う場合はこちらのほうが便利かもしれない。
#!/usr/bin/gjs
const Clutter = imports.gi.Clutter;
const GtkClutter = imports.gi.GtkClutter;
const Gtk = imports.gi.Gtk;
const Gio = imports.gi.Gio;
const Lang = imports.lang;
const ListTest = new Lang.Class({
Name: 'ListTest',
Extends: Gtk.Window,
_init: function() {
this.parent({
title: "GListStore"
});
// GListStore
this.model = new Gio.ListStore({
item_type: Clutter.Text
});
// layout
let layout = new Clutter.BoxLayout({
orientation: Clutter.Orientation.VERTICAL,
//pack_start: true,
spacing: 1
});
// Actor
this.actor = new Clutter.Actor({
background_color: Clutter.Color.from_string("#aaa")[1],
layout_manager: layout
});
this.actor.bind_model(this.model, Lang.bind(this, function(item) {
return item;
}));
// append
let girls = ["椎名心実です", "あかね！", "くおえうえーーーうえうぅぅぅ"];
for (let i=0; i<girls.length; i++) {
let item = new Clutter.Text({
x_align: Clutter.ActorAlign.START,
x_expand: true,
text: girls[i]
});
this.model.append(item);
}
// remove
this.model.remove(1);
// Embed
let embed = new GtkClutter.Embed();
let stage = embed.get_stage();
stage.add_child(this.actor);
this.add(embed);
// this
this.connect("hide", Gtk.main_quit);
this.resize(this.actor.width, this.actor.height);
this.show_all();
}
});
GtkClutter.init(null);
new ListTest();
Gtk.main();
GTK+ 同様に子 Actor のサイズによって親のサイズが拡大されるようだ。
ただし GTK+ 部品にまでは適用されないのでそこらは自力で。
