コントロールとレイアウト

English

UIngは、テキストの表示、入力、値の選択、進捗表示、メニュー、表形式のデータなどに使う ネイティブコントロールを提供します。最初によく使うものにはLabel、Button、Entry、 Checkbox、Combobox、Slider、ProgressBarがあります。

コンテナ

1つのウィンドウが持てる子は1つです。複数のコントロールを配置するときはコンテナを 使用します。

  • Boxは子を横方向または縦方向に並べます。
  • Formはラベルと入力コントロールを揃えます。
  • Gridはコントロールを行と列に配置します。
  • Groupは1つの子をタイトル付きの枠内に配置します。
  • Tabはコントロールを複数のページに整理します。

縦Boxにコントロールを並べる例です。


box = UIng::Box.new(:vertical, padded: true)
box.append(UIng::Label.new("Name"))
box.append(UIng::Entry.new)
box.append(UIng::Button.new("Save"))

window.child = box

エディタに残りの高さを使わせるにはbox.append(editor, stretchy: true)とします。 複雑な配置はコンテナを入れ子にし、最外のコンテナをWindowの子にします（Boxの実例、コントロールギャラリー）。

領域の配分と配置

「余った領域の配分」と「領域内での子の配置」は別の指定です。

コンテナ 領域の配分 領域内の配置
Box stretchyで並べる方向に配分 trueの子はその方向に領域を満たす
Form stretchyで高さを配分 trueの入力欄は縦に伸び、横は常に入力列を満たす
Grid hexpand・vexpandで列・行に配分 halign・valignで指定。:fillなら領域を満たす

BoxとFormは配分と引き伸ばしをまとめて行い、個別のfill引数はありません。拡張と配置を分けるにはGridを使います。paddedは子同士の間隔、marginedは外周の余白で、伸縮とは独立です。

プラットフォーム差

図は配置領域を示し、内部の部品の見た目とは異なる場合があります。macOSのSpinboxは入力欄と矢印の自然な高さを保って中央配置し、Windowsは入力欄を配置領域の高さに合わせます。最小サイズ、文字の位置、標準間隔もOSにより異なります。

Widgetガイド