RadListViewで項目選択を使用する場合、選択された項目と選択されていない項目で異なる視覚的状態が必要になります。 RadListViewのデフォルトの選択動作は、選択の表現方法が異なります。 アイテムの状態を単一の視覚的表現で提供することにより、動作を統一することは一般的なシナリオです。 この記事は、アイテムコンテナーが選択されているかどうかに応じて、アイテムコンテナーの視覚的な状態を実装するためのステップバイステップガイドを表しています。
この章では、ページに次のプロパティを設定した "RadListView" インスタンスを定義します。
また、ハンドラーを提供し、次のイベントを定義する必要があります。
視覚状態を実装するとき、通常、視覚要素の特定のプロパティをモデルのプロパティ値に関連付けます。 モデルプロパティが変更されるとコンテナの外観も変更されるようにする「バインディング」を作成します。 そのために、selectedプロパティを導入するモデルを作成します。 アイテムが選択/選択解除されたときにこのプロパティを更新し、コンテナーの背景色をそれに関連付けます。 モデルは以下の通りです：
export class DataItem extends Observable {
public get selected() {
return this.get('_selected');
}
public set selected(value: boolean) {
this.set('_selected', value);
}
public get name() {
return this.get('_itemName');
}
public set name(value: string) {
this.set('_itemName', value);
}
public get description() {
return this.get('_itemDescription');
}
public set description(value: string) {
this.set('_itemDescription', value);
}
public get id() {
return this.get('_id');
}
public set id(value: number) {
this.set('_id', value);
}
constructor(id: number, name: string, description: string) {
super();
this.id = id;
this.name = name;
this.description = description;
this.selected = false;
}
}
このクラスのインスタンスを使用して、ページのbindingContextとして割り当てるビューモデルを作成して、RadListViewをバインドします。 ビューモデルはdataItemsと呼ばれるプロパティを公開し、DataItemインスタンスを含むObservableArrayオブジェクトを返します。
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { Observable } from "tns-core-modules/data/observable";
import { ListViewEventData } from "nativescript-ui-listview";
export class ViewModel extends Observable {
constructor() {
super();
this.initDataItems();
}
get dataItems(): ObservableArray<DataItem> {
return this.get("_dataItems");
}
set dataItems(value: ObservableArray<DataItem>) {
this.set("_dataItems", value);
}
public itemSelected(args: ListViewEventData) {
const item = this.dataItems.getItem(args.index);
console.log("Selected item: " + item.name);
item.selected = true;
}
public itemSelecting(args: ListViewEventData) {
const item = this.dataItems.getItem(args.index);
console.log("Selecting item: " + item.name);
}
public itemDeselecting(args: ListViewEventData) {
const item = this.dataItems.getItem(args.index);
console.log("Deselecting item: " + item.name);
}
public itemDeselected(args: ListViewEventData) {
const item = this.dataItems.getItem(args.index);
console.log("Deselected item: " + item.name);
item.selected = false;
}
private initDataItems() {
this.dataItems = new ObservableArray<DataItem>();
for (let i = 0; i < 25; i++) {
this.dataItems.push(new DataItem(i, "Item " + i, "This is item description."));
}
}
}アイテム選択状態の実装の重要な部分は、アイテムの視覚的構造を定義するテンプレートです。 選択状態に従ってコンテナーの外観を更新するには、各コンテナーのルート要素の背景色を更新します。 そのために、モデルで定義されたselectedプロパティへのXMLバインディングを作成します。 このバインディングは、項目が選択されるとredになり、項目が選択解除されるとwhiteに戻ります。 XMLは以下の通りです：
<StackLayout orientation="vertical" backgroundColor="{{ selected ? 'red' : 'white'}}">
<Label fontSize="20" text="{{ name }}"/>
<Label fontSize="14" text="{{ description }}"/>
</StackLayout>最後のタスクでは、選択状態が変更されたときにモデルのselectedプロパティを更新します。これは、RadListViewによって公開された対応する以下の選択イベントを使用して行われます。
スニペットは、これらのイベントがサブスクライブされる方法を示しています。
<lv:RadListView items="{{ dataItems }}" row="1" multipleSelection="true" selectionBehavior="Press" itemSelected="{{itemSelected}}" itemSelecting="{{itemSelecting}}" itemDeselecting="{{itemDeselecting}}" itemDeselected="{{itemDeselected}}">ビジネスオブジェクトでselectedプロパティを定義したら、このプロパティを次のように更新します。
public itemSelected(args: ListViewEventData) {
const item = this.dataItems.getItem(args.index);
console.log("Selected item: " + item.name);
item.selected = true;
}
public itemSelecting(args: ListViewEventData) {
const item = this.dataItems.getItem(args.index);
console.log("Selecting item: " + item.name);
}
public itemDeselecting(args: ListViewEventData) {
const item = this.dataItems.getItem(args.index);
console.log("Deselecting item: " + item.name);
}
public itemDeselected(args: ListViewEventData) {
const item = this.dataItems.getItem(args.index);
console.log("Deselected item: " + item.name);
item.selected = false;
}