ListView (리스트뷰) Widget Control

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

備考

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

Widget Control一覧

Widget Control	種類	シグネチャ	説明
count	Property	count（読み取り/書き込み）	繰り返し項目の数を読み取る、または設定する
current	Property	current（読み取り/書き込み）	バインディングスコープとして使う現在の項目インデックス
select	Property	select（読み取り/書き込み）	選択されている項目のインデックス
overflowCount	Property	overflowCount（読み取り専用）	clipモードで切り取られて非表示になった項目数
add	Method	add(): int	末尾に空の項目を追加し、新しいインデックスを返す
insert	Method	insert(index)	指定した位置に空の項目を挿入する
remove	Method	remove(index)	指定したインデックスの項目を削除する
clear	Method	clear()	すべての項目を削除する
setState	Method	setState(index, function)	項目1つのバインディングプロパティのみを更新する
setOnceAnimation	Method	setOnceAnimation()	登場（staggered）アニメーションを1回再生し直す
scrollToIndex	Method	scrollToIndex(index, duration)	該当項目が一番上に来るようにスクロールする
getFirstVisibleIndex	Method	getFirstVisibleIndex(): int	最初に表示されている項目のインデックスを返す
onSelected	Event	onSelected = (index) => { ... }	ユーザーが項目をタップしたときに実行される
onScrollEnd	Event	onScrollEnd = () => { ... }	スクロールがリストの端に到達したときに実行される
onOverflowChanged	Event	onOverflowChanged = (count) => { ... }	切り取られた項目数が変わったときに実行される

Property

count

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

• 種類: Property（読み取り/書き込み）
• 型: 整数（int）

Example

listviewID.count = 10;
const n = listviewID.count;

current

バインディングスコープとして使用する現在の項目インデックスです。設定すると、以降のプロパティ書き込みはその項目の行を対象にします。読み取ると現在のインデックスを返し、設定されていない場合は-1を返します。

• 種類: Property（読み取り/書き込み）
• 型: 整数（int）

Example

listviewID.current = 2;
const cur = listviewID.current;

select

選択されている項目のインデックスです。設定するとそのインデックスを選択状態にし、読み取ると選択されているインデックスを返します。選択されていない場合は-1を返します。

• 種類: Property（読み取り/書き込み）
• 型: 整数（int）

Example

listviewID.select = 0;
const sel = listviewID.select;

overflowCount

overflowModeがclipのときに、領域に合わせて切り取られて非表示になった項目の数です。読み取り専用です。

• 種類: Property（読み取り専用）
• 型: 整数（int）

Example

const hidden = listviewID.overflowCount;

Method

add

リストの末尾に空の項目を追加して再描画します。

• Parameters: なし
• Returns: 整数（int）- 新しく追加された項目のインデックス

Example

const i = listviewID.add();

insert

指定した位置に空の項目を挿入して再描画します。

• Parameters: index 整数（int）- 挿入する位置
• Returns: なし

Example

listviewID.insert(0);

remove

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

• Parameters: index 整数（int）- 削除する項目のインデックス
• Returns: なし

Example

listviewID.remove(0);

clear

リストのすべての項目を削除して再描画します。

• Parameters: なし
• Returns: なし

Example

listviewID.clear();

setState

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

• Parameters: index 整数（int）- 更新する項目のインデックス · function コールバック関数 - indexがアクティブな項目である間に実行される
• Returns: なし

Example

listviewID.setState(0, () => {
  // 0番目の項目のバインディングプロパティを更新
});

setOnceAnimation

次のビルドで項目の登場（staggered）アニメーションを1回再生し直します。データを更新した後に登場効果を再度見せたいときに便利です。

• Parameters: なし
• Returns: なし

Example

listviewID.setOnceAnimation();

scrollToIndex

指定したインデックスの項目が一番上に来るようにスクロールします。itemExtent（項目の固定サイズ）が設定されている必要があり（設定がない場合は何も行いません）、移動位置は最大スクロール範囲に制限されます。

• Parameters: index 整数（int）- スクロールして表示する項目のインデックス · duration 整数（int）またはnull - アニメーション時間（ミリ秒）。nullまたは0以下の場合はアニメーションなしですぐに移動します
• Returns: なし

Example

listviewID.scrollToIndex(10, 300);

getFirstVisibleIndex

現在最初に表示されている項目のインデックスを返します。itemExtentが設定されている場合にのみ計算し、設定がない場合は0を返します。

• Parameters: なし
• Returns: 整数（int）- 最初に表示されている項目のインデックス

Example

const index = listviewID.getFirstVisibleIndex();

Event

onSelected

ユーザーがリストの項目をタップしたときに実行されます。

• 種類: Event
• ハンドラー: index 整数（int）- タップした項目のインデックスを受け取るコールバック関数
• Returns: なし

Example

listviewID.onSelected = (index) => {
  // 選択した項目を処理
};

onScrollEnd

スクロールがリストの端（一番下）に到達したときに1回実行されます。端から離れると、再び発火できる状態に戻ります。

• 種類: Event
• ハンドラー: 引数のないコールバック関数
• Returns: なし

Example

listviewID.onScrollEnd = () => {
  // 次のページの読み込みなど
};

onOverflowChanged

clipオーバーフローモードで、切り取られた項目数が変わったときにのみ実行されます。

• 種類: Event
• ハンドラー: count 整数（int）- 新しく切り取られた項目数を受け取るコールバック関数
• Returns: なし

Example

listviewID.onOverflowChanged = (count) => {
  // 切り取られた項目数の変化を処理
};

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

注記

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