メインコンテンツまでスキップ

WrapList (랩리스트) Widget Control

WrapListウィジェットをスクリプトから制御するときに使うWidget Control（Property · Method · Event）の一覧です。ウィジェットの紹介と使い方はWrapListのドキュメントをご覧ください。

備考

下記の例のwraplistIDは、キャンバスでWrapListウィジェットに指定した名前（ID）です。
スクリプトではwidgetID.memberの形式でアクセスします。

Widget Control一覧​

Widget Control種類シグネチャ説明
addMethodadd() → number空のアイテムを末尾に追加
clearMethodclear() → なしすべてのアイテムを削除
countPropertycount (get/set, number)繰り返しアイテムの個数を読み取る、または設定
currentPropertycurrent (get/set, number)バインディングスコープとなる現在のアイテムのインデックス
insertMethodinsert(index) → なし指定した位置に空のアイテムを挿入
lineCountPropertylineCount (get, number)現在配置されている行（run）数
onLineCountChangedEventonLineCountChanged = (lineCount) => { ... }配置された行数が変わったときに実行
onOverflowChangedEventonOverflowChanged = (count) => { ... }切り詰められたアイテム数が変わったときに実行
onSelectedEventonSelected = (index) => { ... }アイテムをタップしたときに実行
overflowCountPropertyoverflowCount (get, number)maxLines超過で切り詰められたアイテム数
removeMethodremove(index) → なし指定したインデックスのアイテムを削除
selectPropertyselect (get/set, number)選択されたアイテムのインデックス
setStateMethodsetState(index, function) → なし指定したアイテムのみ更新して再描画

Widget Control詳細​

add​

空のアイテムをリストの末尾に追加して再描画します。

  • 種類: Method
  • Parameters: なし
  • Returns: number - 新しく追加されたアイテムのインデックス

Example

const i = wraplistID.add();

clear​

すべてのアイテムを削除して再描画します。

  • 種類: Method
  • Parameters: なし
  • Returns: なし

Example

wraplistID.clear();

count​

繰り返しレンダリングするアイテムの個数です。読み取ると現在の個数を返します。値を設定すると、バインディングされたデータリストをその個数に合わせて増減させたうえで再描画します。

  • 種類: Property (get/set)
  • 型: number

Example

const n = wraplistID.count;
wraplistID.count = 5;

current​

バインディングスコープとなる現在のアイテムのインデックスです。設定すると、以降のプロパティ書き込みはそのアイテムの行を対象にします。指定された値がない場合は-1を返します。

  • 種類: Property (get/set)
  • 型: number（ない場合は-1）

Example

wraplistID.current = 2;
const cur = wraplistID.current;

insert​

指定したインデックスの位置に空のアイテムを挿入して再描画します。

  • 種類: Method
  • Parameters: index (number) - 挿入する位置
  • Returns: なし

Example

wraplistID.insert(0);

lineCount​

現在配置されている行（run）数です。maxLinesが設定されている場合のみ更新されます。読み取り専用です。

  • 種類: Property (get)
  • 型: number

Example

const lines = wraplistID.lineCount;

onLineCountChanged​

配置された行数が変わったときに実行されます。

  • 種類: Event
  • ハンドラー: (lineCount) => { ... } - lineCountは新しく配置された行数
  • Returns: なし

Example

// 前提: wraplistIDにmaxLinesが設定されている場合のみ発火します
wraplistID.onLineCountChanged = (lineCount) => {
  // 現在何行で配置されているかに応じてUIを調整
  moreButton.visible = (lineCount >= wraplistID.maxLines);
};

onOverflowChanged​

切り詰められた（超過した）アイテム数が変わったときに実行されます。

  • 種類: Event
  • ハンドラー: (count) => { ... } - countは新しく切り詰められたアイテム数
  • Returns: なし

Example

wraplistID.onOverflowChanged = (count) => { /* ... */ };

onSelected​

ユーザーがアイテムをタップしたときに実行されます。

  • 種類: Event
  • ハンドラー: (index) => { ... } - indexはタップしたアイテムのインデックス
  • Returns: なし

Example

wraplistID.onSelected = (index) => { /* ... */ };

overflowCount​

maxLinesを超過して切り詰められた（非表示になった）アイテム数です。切り詰められたものがない場合やmaxLinesが設定されていない場合は0を返します。読み取り専用です。

  • 種類: Property (get)
  • 型: number

Example

const hidden = wraplistID.overflowCount;

remove​

指定したインデックスのアイテムを削除して再描画します。インデックスが範囲外の場合は何も行いません。

  • 種類: Method
  • Parameters: index (number) - 削除するアイテムのインデックス
  • Returns: なし

Example

wraplistID.remove(0);

select​

選択されたアイテムのインデックスです。選択されたものがない場合は-1を返します。

  • 種類: Property (get/set)
  • 型: number（未選択のときは-1）

Example

wraplistID.select = 0;
const sel = wraplistID.select;

setState​

バインディングスコープを指定したインデックスのアイテムに設定した状態でコールバックを実行し、そのアイテムのみ再描画します。1つのアイテムのバインディングプロパティを更新するときに使用します。

  • 種類: Method
  • Parameters: index (number) - 更新するアイテムのインデックス / function (コールバック関数) - 該当インデックスがアクティブアイテムである間に実行されます
  • Returns: なし

Example

wraplistID.setState(0, () => {
  $item.title = "변경된 제목";   // 0番目のitemにバインドされたプロパティを更新
  $item.selected = true;
});

共通Widget Control（すべてのウィジェット）​

注記

すべてのウィジェットはsetProperty / getProperty / setStylePropertyのような名前ベースの共通Widget Control（Method）を使用できます。共通リファレンスドキュメント（作成予定）をご覧ください。