ListPickerは、スピナータイプコンポーネントでリストの変形です。
以下の例は、XMLページでListPickerを設定する方法、selectedIndexプロパティをバインドする方法、およびその変更を処理する方法を示しています。
<ListPicker items="{{ years }}" selectedIndex="0" loaded="onListPickerLoaded" />
const fromObject = require("tns-core-modules/data/observable").fromObject;
const years = [1980, 1990, 2000, 2010, 2020];
function onNavigatingTo(args) {
const page = args.object;
const vm = fromObject({
years: years
});
page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
function onListPickerLoaded(fargs) {
const listPickerComponent = fargs.object;
listPickerComponent.on("selectedIndexChange", (args) => {
const picker = args.object;
console.log(`index: ${picker.selectedIndex}; item" ${years[picker.selectedIndex]}`);
});
}
exports.onListPickerLoaded = onListPickerLoaded;
import { EventData, fromObject } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { ListPicker } from "tns-core-modules/ui/list-picker/list-picker";
const years = [1980, 1990, 2000, 2010, 2020];
export function onNavigatingTo(args: EventData) {
const page = <Page>args.object;
const vm = fromObject({
years: years
});
page.bindingContext = vm;
}
export function onListPickerLoaded(fargs) {
const listPickerComponent = fargs.object;
listPickerComponent.on("selectedIndexChange", (args: EventData) => {
const picker = <ListPicker>args.object;
console.log(`index: ${picker.selectedIndex}; item" ${years[picker.selectedIndex]}`);
});
}
<ListPicker items="{{ items }}" class="picker"/>
const fromObject = require("tns-core-modules/data/observable").fromObject;
function onNavigatingTo(args) {
const items = ["Batman", "Joker", "Bane"];
const page = args.object;
const vm = fromObject({
items: items
});
page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
import { EventData, fromObject } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
export function onNavigatingTo(args: EventData) {
const items = ["Batman", "Joker", "Bane"];
const page = <Page>args.object;
const vm = fromObject({
items: items
});
page.bindingContext = vm;
}
.picker {
background-color: blanchedalmond;
color: red;
border-color: brown;
border-radius: 20;
border-width: 2;
width: 200;
height: 100;
vertical-align: middle;
}
この機能は、ListPickerに表示されるテキストフィールドと、結果として返される値フィールドを指定する簡単な方法を提供します。 このシナリオでは、JSONオブジェクトをListPickerのソースに設定するときに、 表示値と結果値を指定するtextFieldプロパティとvalueFieldプロパティを設定する必要があります。 以下の例では、 textFieldをname、valueFieldをroleに設定します。 これは、nameとしてマークされたすべてのプロパティがコンポーネントに表示され、その結果、対応するroleを受け取ることを意味します。 選択された値は、selectedValueプロパティを介して受け取ります。 このプロパティには、コードビハインドからもアクセスできます。
<ListPicker
loaded="onListPickerLoaded"
items="{{ items }}"
textField="name"
valueField="role"
selectedIndex="{{ index }}"
selectedValue="{{ selectedItem }}">
</ListPicker>
function onNavigatingTo(args) {
const page = args.object;
const vm = fromObject({
items: [
{ id: 1, name: "Ter Stegen", role: "Goalkeeper" },
{ id: 3, name: "Piqué", role: "Defender" },
{ id: 4, name: "I. Rakitic", role: "Midfielder" }
],
index: 2,
selectedItem: ""
});
page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
function onListPickerLoaded(args) {
const listPicker = args.object;
listPicker.on("selectedIndexChange", (lpargs) => {
const picker = lpargs.object;
console.log(`ListPicker selected value: ${picker.selectedValue} ListPicker selected index: ${picker.selectedIndex}`);
});
}
exports.onListPickerLoaded = onListPickerLoaded;
import { EventData, fromObject } from "tns-core-modules/data/observable";
import { ListPicker } from "tns-core-modules/ui/list-picker";
import { Page } from "tns-core-modules/ui/page";
export function onNavigatingTo(args: EventData) {
const page = <Page>args.object;
const vm = fromObject({
items: [
{ id: 1, name: "Ter Stegen", role: "Goalkeeper" },
{ id: 3, name: "Piqué", role: "Defender" },
{ id: 4, name: "I. Rakitic", role: "Midfielder" }
],
index: 2,
selectedItem: ""
});
page.bindingContext = vm;
}
export function onListPickerLoaded(args: EventData) {
const listPicker = <ListPicker>args.object;
listPicker.on("selectedIndexChange", (lpargs) => {
const picker = <ListPicker>lpargs.object;
console.log(`ListPicker selected value: ${(<any>picker).selectedValue}`);
console.log(`ListPicker selected index: ${picker.selectedIndex}`);
});
}
リスト項目のソースデータとデフォルトの選択項目を設定し、プログラムでListPicker作成します。
const ListPicker = require("tns-core-modules/ui/list-picker").ListPicker;
function onNavigatingTo(args) {
const page = args.object;
const container = page.getViewById("container");
const listPicker = new ListPicker();
listPicker.items = [
"NativeScript Core - JavaScript",
"NativeScript Core - TypeScript",
"NativeScript Angular",
"NativeScript Vue",
"NativeScript Code Sharing",
"NativeScript Sidekick"
];
listPicker.selectedIndex = 0;
container.addChild(listPicker);
}
exports.onNavigatingTo = onNavigatingTo;
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
import { ListPicker } from "tns-core-modules/ui/list-picker";
export function onNavigatingTo(args: EventData) {
const page = args.object;
const container = page.getViewById("container");
const listPicker = new ListPicker();
listPicker.items = [
"NativeScript Core - JavaScript",
"NativeScript Core - TypeScript",
"NativeScript Angular",
"NativeScript Vue",
"NativeScript Code Sharing",
"NativeScript Sidekick"
];
listPicker.selectedIndex = 1;
container.addChild(listPicker);
}
名前 | タイプ | 説明 |
---|---|---|
items |
Array<any> |
ListPickerの項目コレクションを取得または設定します。 itemsプロパティには、長さを定義するlength、およびgetItem(index)メソッドオブジェクトを設定できます。 |
selectedIndex |
number |
選択された項目のindexを取得または設定します。 |
名前 | 説明 |
---|---|
selectedIndexChange |
selectedIndexが変更されたときに生成されます。 |
名前 | タイプ |
---|---|
tns-core-modules/ui/list-picker | Module |
ListPicker | Class |
ANDROID | IOS |
---|---|
android.widget.NumberPicker | UIPickerView |