Repeaterウィジェットを使用すると、配列にあるデータのコレクションを表示できます。
const repeaterModule = require("tns-core-modules/ui/repeater");
import { Repeater } from "tns-core-modules/ui/repeater";
この例は、XMLでRepeaterを定義する方法と、そのデータをロードする方法を示しています。
<Label row="0" text="Binding the Repeater items property to collection" textWrap="true" />
<Button row="1" text="Add new item" tap="onTap" />
<ScrollView row="2">
<Repeater id="firstRepeater" items="{{ myItems }}" />
</ScrollView>
<Label row="3" text="Define the Repeater itemTemplate property" textWrap="true" />
<Button row="4" text="Add new item (Second Repeater)" tap="onSecondTap" />
<ScrollView row="5" orientation="horizontal">
<Repeater items="{{ mySecondItems }}">
<Repeater.itemsLayout>
<StackLayout orientation="horizontal" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ $value }}" margin="10" />
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
const colors = ["red", "green", "blue"];
const secondColorsArray = new observableArrayModule.ObservableArray(["red", "green", "blue"]);
function onNavigatingTo(args) {
const page = args.object;
const vm = new observableModule.Observable();
vm.set("myItems", colors);
vm.set("mySecondItems", secondColorsArray);
page.bindingContext = vm;
}
const colors = ["red", "green", "blue"];
const secondColorsArray = new ObservableArray(["red", "green", "blue"]);
export function onNavigatingTo(args) {
const page: Page = <Page>args.object;
const vm = new Observable();
vm.set("myItems", colors);
vm.set("mySecondItems", secondColorsArray);
page.bindingContext = vm;
}
colors.push("yellow");
// Manually trigger the update so that the new color is shown.
repeater.refresh();
colors.push("yellow");
// Manually trigger the update so that the new color is shown.
repeater.refresh();
secondColorsArray.push("yellow");
// The Repeater will be updated automatically.
secondColorsArray.push("yellow");
// The Repeater will be updated automatically.
以下の例では、コードビハインドを使用してリピーターを作成する方法を示しています
<StackLayout id="stackLayoutId">
<Label text="{{ 'Result: ' + prResult}}" textWrap="true" />
</StackLayout>
function onPageLoaded(args) {
const page = args.object;
const stackLayoutContainer = page.getViewById("stackLayoutId");
const secondColorsArray = new observableArrayModule.ObservableArray(["red", "green", "blue"]);
const repeater = new repeaterModule.Repeater();
const stackLayout = new stackLayoutModule.StackLayout();
stackLayout.orientation = "horizontal";
repeater.itemsLayout = stackLayout;
repeater.items = secondColorsArray;
stackLayoutContainer.addChild(repeater);
}
exports.onPageLoaded = onPageLoaded;
export function onPageLoaded(args) {
const page: Page = <Page>args.object;
const stackLayoutContainer: StackLayout = <StackLayout>page.getViewById("stackLayoutId");
const secondColorsArray = new ObservableArray(["red", "green", "blue"]);
const repeater = new Repeater();
const stackLayout = new StackLayout();
stackLayout.orientation = "horizontal";
repeater.itemsLayout = stackLayout;
repeater.items = secondColorsArray;
stackLayoutContainer.addChild(repeater);
}
APIリファレンス: Repeaterクラス