Box
Boxは子コントロールを水平または垂直に並べます。
表示例
実行例
require "uing"
UIng.init
window = UIng::Window.new("Box Vertical Example", 200, 150, margined: true)
window.on_closing do
UIng.quit
true
end
box = UIng::Box.new(:vertical, padded: true)
button1 = UIng::Button.new("Button1") do
on_clicked do
window.msg_box("Information", "You clicked Button1")
end
end
button2 = UIng::Button.new("Button2") do
on_clicked do
window.msg_box("Information", "You clicked Button2")
end
end
button3 = UIng::Button.new("Button3") do
on_clicked do
window.msg_box("Information", "You clicked Button3")
end
end
box.append(button1)
box.append(button2)
box.append(button3)
window.child = box
window.show
UIng.main
UIng.uninit
並べる方向と伸縮
子はappendした順に並び、stretchyは子ごとに指定します。
| Boxの向き | stretchy: false（既定） |
stretchy: true |
直交する方向 |
|---|---|---|---|
横 :horizontal |
必要な幅を保つ | 残りの幅を受け取る | 高さは原則Boxに合わせる |
縦 :vertical |
必要な高さを保つ | 残りの高さを受け取る | 幅は原則Boxに合わせる |
trueが複数なら、それらの幅（縦Boxなら高さ）は等しくなります。重みの指定はありません。すべてfalseなら左（縦Boxなら上）に詰め、余りは末尾に残ります。最小サイズは子の必要サイズに従います。
横BoxのLabelは自然な高さで上下中央に配置されます。部品内部の見た目にはプラットフォーム差があります。拡張と中央寄せなどを別々に指定するにはGridを使います。
子同士の間隔と外周の余白
padded: trueは子同士の間隔、WindowやGroupのmarginedは外周の余白を設定します。paddedの既定値はfalseです。
間隔はOSや表示設定に従い、ピクセル数は指定できません。box.padded = trueで変更でき、入れ子ではBoxごとに設定します。
入れ子で組み立てる
UIng.init後、作成済みのwindowに配置する例です。
search = UIng::Box.new(:horizontal, padded: true)
search.append(UIng::Label.new("検索"))
search.append(UIng::Entry.new, stretchy: true) # 横方向に伸びる
search.append(UIng::Button.new("検索"))
editor = UIng::MultilineEntry.new
status = UIng::Label.new("準備完了")
body = UIng::Box.new(:vertical, padded: true)
body.append(search) # 検索行の高さは必要な分だけ
body.append(editor, stretchy: true) # 残りの高さを使う
body.append(status)
window.margined = true
window.child = body
横に広げると検索欄とエディタが、縦に広げるとエディタが伸びます。検索行の高さと状態表示の高さは保たれます。
bodyを別の縦Boxに入れて縦に伸ばす場合は、そのappendにもstretchy: trueが必要です。
水平Boxの例も参照してください。