VSplit
VSplitウィジェットは、画面を縦方向に複数の領域へ分割し、領域の間の分割線で各領域のサイズを調整できるレイアウトウィジェットです。
画面を複数の区画で構成するときに使用します。
備考
このウィジェットはFreeプランではロックされており、Pro・Enterpriseプランで使用できます。
定義・役割
VSplitウィジェットは、自身の領域を縦方向に複数の分割領域（SplitItem）へ分けます。各領域には別のウィジェットを配置でき、領域の間には分割線が描画されます。分割線の表示・太さ・色・余白・角丸を設定でき、分割線の固定を解除すると、分割線をドラッグして隣接する2つの領域のサイズをリアルタイムに調整できます。
- カテゴリー: Layouts
- デフォルトの分割領域数:
2 - デフォルトの分割線: 太さ
10、白、常に表示、固定（ドラッグ不可）
機能
| 機能 | 説明 |
|---|---|
| 縦分割 | 画面を縦方向にitemCount（2〜99）個の領域へ分割します。 |
| 領域ごとのウィジェット配置 | 各分割領域（SplitItem）の中に個別のウィジェットをドラッグして配置します。 |
| 初期サイズ比率 | 各領域の初期サイズ比率をsplitItem{N}Flexの値で指定します。（例: 2と1→2:1の比率） |
| ドラッグでのサイズ調整 | 分割線の固定（isFixedDivider）を解除すると、分割線をドラッグして隣接する2つの領域のサイズをリアルタイムに調整できます。 |
| 分割線のスタイル | 分割線の表示・太さ・色・余白（開始側と終了側）・角丸を設定します。 |
使い方
- 左のウィジェットパレットでLayoutsカテゴリーを開きます。
- VSplit項目をキャンバスへドラッグ＆ドロップします。
- 右のプロパティパネルで
itemCountにより分割する領域数を指定します。 - 各分割領域（SplitItem）の中に配置するウィジェットをドラッグ＆ドロップします。
- 必要に応じて
splitItem{N}Flexで初期比率を、分割線関連のプロパティで見た目を調整します。分割線をドラッグで調整するにはisFixedDividerを解除します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
itemCount | 分割する領域数 | 2 | 整数（2〜99） |
isShowDivider | 分割線を表示するかどうか | true（表示） | true / false |
isFixedDivider | 分割線を固定するかどうか（解除するとドラッグでサイズ調整が可能） | true（固定） | true / false |
dividerThickness | 分割線の太さ | 10 | 数値 |
dividerIndent | 分割線の開始側の余白 | 0 | 数値 |
dividerEndIndent | 分割線の終了側の余白 | 0 | 数値 |
dividerColor | 分割線の色 | 白（#FFFFFF） | カラー |
dividerBorderRadius | 分割線の角丸 | 0 | 数値 |
splitItem{N}Flex | 各領域の初期サイズ比率（領域数に応じて自動生成） | 1 | 整数（1〜1000） |
注意・ヒント
警告
デフォルトでは分割線が固定（isFixedDivider = true）されているため、ドラッグでサイズを調整できません。ドラッグでの調整が必要な場合はisFixedDividerを解除してください。
ヒント
各領域の初期サイズはsplitItem{N}Flexの値の比率で決まります。たとえば2つの領域を2:1に分けるには、それぞれのflexを2と1に指定します。ウィジェットは各分割領域（SplitItem）の中にのみ配置できます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体はVSplit Widget Controlでご確認ください。