概要
フレームは、動的レイアウトシャウトアウト内の構造化エリアを定義し、ウィジェットのコンテナとして機能します。 フレームでは、キャンバス内のコンテンツを整理しながら、レイアウト、配置、間隔、応答性を制御できます。
この記事では、レイアウト動作、間隔ルール、配置オプションなど、フレームの追加、スタイル、サイズ変更、管理方法を説明します。
フレームスタイリング
プロパティバッグの「スタイル」タブからフレームの外観をカスタマイズできます。
設定できます：
フレームの追加
以下の方法でフレームを追加できます：
- 既存フレームを複製
- キャンバスの外縁にカーソルを合わせると表示されるプラスアイコンを選択します。
フレームの動作と制限：
- 1行に最大4フレームを追加できます。
- 縦フレームの数に制限はありません。
- フレームが追加または削除された場合、キャンバスの幅は均等に分割されるため、すべてのフレームは同じサイズになります。
- 最小フレーム幅は、キャンバスの10%です。
レイアウトとサイズ変更
フレームは、隣接フレームとの関係に基づいて応答性のある水平サイズ変更をサポートします。
フレームのサイズ変更
- 別のフレームと共有されている端をドラッグして、フレームのサイズを変更します。
- フレームは、別のフレームと共有されている側からのみサイズを変更できます。
- フレーム幅は、キャンバス幅の割合として計算されます。
- フレームは、コンテンツよりも小さくサイズを変更できません。
フレーム配置
調整コントロールは、同じ行のフレームにコンテンツの量が異なる場合に利用できます。
以下の操作が可能です:
- フレーム内で要素を垂直に揃える
- フレーム内で要素を水平に整列します。
ウィジェット間隔
フレームは、ウィジェット間のデフォルトの垂直間隔を制御します。
以下の操作が可能です:
- フレームレベルでウィジェット間のデフォルトの縦間隔を調整します。
- ウィジェットレベルで特定のウィジェットの間隔を上書きします。
フレームの移動
ドラッグアンドドロップすることで、キャンバス内でフレームの位置を変更できます。
フレームは移動できます：
内部スペース
内部スペースは、フレームの端と内部のウィジェットとの間の距離を定義します。
内部スペースを調整するには：
- フレームを選択します。
- すべての辺に均一な間隔値を設定するか、
- 境界アイコンを選択し、側面ごとの間隔を制御します。
ウィジェットがフレームを完全にカバーし、フレームの選択を妨げる場合：
- ブレッドクラムを使用して、ウィジェットとフレームの選択を切り替えます。
技術的なノート
- 1つのフレーム内の1行に、最大4つのウィジェットを追加できます。
