ページはウィジェットをドラッグ＆ドロップするだけで作成できますが、layout プロパティを使用するとデザイン作業を大幅にスピードアップできます。layout プロパティは、ウィジェットのサイズと位置を即座に、そして正確に制御します。
layout プロパティ
パネル ウィジェットのメイン プロパティ グループには、子ウィジェットの配置方法を定義する layout プロパティがあります。このプロパティが取り得る値は、次の 3 つです。
- fixed: パネルの端を基準にして子ウィジェットを配置する。
- horizontal: 子ウィジェットを水平方向に並べて配置する。
- vertical: 子ウィジェットを垂直方向に上下に配置する。
fixed オプションは、親パネルに関連して、子を絶対的に配置します。horizontal オプションと vertical オプションでは、パネル内の他のウィジェットの左右または上下に、ウィジェットを相対的に配置します。相対位置にあるウィジェットは、周囲のウィジェットとともに流れると考えることができます。実際、このように配置されたウィジェットはフローと呼びます。
各種の layout プロパティ
すべてのウィジェットには、サイズと位置を決定する layout プロパティ グループがあります。layout グループの内容は、ウィジェットの親パネルの layout プロパティに基づいて変わります。
固定パネルの layout プロパティ
固定パネルのウィジェットには、パネルの端を基準にしてサイズと位置を設定する layout プロパティがあります。表示される正確なプロパティはウィジェットのタイプと選択内容によって異なりますが、すべて 4 つの基本タイプに分類されます。
| タイプ | 説明 | プロパティ |
|---|---|---|
| 位置 | 位置プロパティは、ウィジェットが親ウィジェットの端からどれだけ離れている必要があるかを決定します。位置プロパティの横にあるチェックボックスで無効にできます。軸の最後のプロパティを無効にすると、App Maker は反対のプロパティを自動的に有効にします。 | top、bottom、left、right |
| 絶対サイズ | 対応する自動サイズ プロパティが有効になっていない限り、絶対サイズ プロパティがウィジェットのサイズを決定します。サイズ プロパティの横にあるチェックボックスで無効にできます。絶対サイズ プロパティを無効にすると、ウィジェットのサイズは代わりにその軸の位置プロパティによって決定されます。 | width、height |
| 自動サイズ | 自動サイズ プロパティは、コンテンツに基づいてウィジェットのサイズを自動的に調整します。このプロパティは、一部のウィジェット タイプで、対応する絶対サイズ プロパティを無効にしていない場合に限り使用できます。 | autoWidth、autoHeight |
| サイズ制限 | サイズ制限プロパティは、自動的にサイズ変更された絶対サイズ軸と無効にされた絶対サイズ軸に、最大と最小のサイズ制限を設定します。値を入力して、ウィジェットの最小許容サイズや最大許容サイズを寸法に設定します。 | minWidth、maxWidth、minHeight、maxHeight |
フローパネルの Layout プロパティ
垂直パネルと水平パネルのウィジェットには、サイズと位置を制御する Layout プロパティもありますが、位置を制御するオプションは固定パネルよりもはるかに制限されています。フローパネルのプロパティは、垂直と水平の 2 列に配置されています。各列はそれぞれの軸を制御します。
| タイプ | 説明 | プロパティ |
|---|---|---|
| サイズ | サイズは、ウィジェットのサイズを各軸に対しどのように設定するかを制御します。fixed、fit to content、fill parent から選択します。 |
size |
| 絶対サイズ | 絶対サイズ プロパティは、size プロパティが fixed のときのウィジェット サイズを決定します。 |
width、height |
| サイズ制限 | 制限プロパティは、ウィジェットの size プロパティが fit to content または fill parent のときの、最大と最小のサイズ制限を設定します。 |
minWidth、maxWidth、minHeight、maxHeight |
| 配置 | 配置は、パネルの非フロー軸の位置を制御します。ウィジェットの水平パネルでの垂直配置と、垂直パネルでの水平配置を決定します。 | align |
Spacing
個々のウィジェットのマージンとパディングを制御するには、Spacing を使用します。
| タイプ | 説明 | プロパティ |
|---|---|---|
| マージン | ウィジェットの端とページ上の近くのオブジェクトとの間の、スペースの量を定義します。 | margin top、margin bottom、margin left、margin right
|
| パディング | ウィジェットのコンテンツとウィジェットの端との間の、スペースの量を制御します。 | padding top、padding bottom、padding left、padding right
|
Flow プロパティ
固定パネルとは異なり、フローパネル内のほとんどのウィジェットの配置はパネルレベルで行われます。インフロー ウィジェットを配置するには、親パネルの Flow グループのプロパティを使用します。
| プロパティ | 説明 |
|---|---|
wrap |
このプロパティは、これを使用しないとフロー軸よりも幅が広くなるウィジェットを、パネルがどのように配置するかを制御します。 |
justify |
このプロパティは、パネルがウィジェットをフロー軸に沿ってどのように配置するかを制御します。 |
alignChidren |
このプロパティは、パネルがウィジェットを非フロー軸に沿ってどのように配置するかを制御します。 |
wrapAlign |
このプロパティは、wrap プロパティが有効な場合に、パネルが折り返すウィジェットをどのように配置するかを制御します。 |
Size プロパティ
Size プロパティ グループは、Layout グループのすべてのサイズ プロパティを通常のプロパティとして一覧表示します。これにより、プロパティをデータバインドして値を動的に変更できます。このグループのプロパティはすべて同時に編集可能であるため、競合する値を設定するおそれがあります。たとえば、left、right、width の値を、互換性のない数値に設定する可能性があります。App Maker は、競合するサイズ プロパティに関して動作の一貫性を保証しません。
アウトライン
キャンバスの右側にある [Outline] タブで、ウィジェットのロック 
や非表示 
の操作ができます。ロックされたウィジェットはキャンバス上で選択できないため、誤って移動させることはありません。また、非表示のウィジェットはキャンバス上にレンダリングされないため、非表示でなければその影に隠れていたはずのウィジェットを操作できます。ウィジェットを非表示にしても、アプリの実行時には表示されます。ロックまたは非表示になっているウィジェットを再配置または編集するには、[Outline] からそのウィジェットの名前を選択します。