ユーザーインターフェイス / コンポーネント / リストピッカー

リストピッカー

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の作成

リスト項目のソースデータとデフォルトの選択項目を設定し、プログラムで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が変更されたときに生成されます。

APIリファレンス

名前 タイプ
tns-core-modules/ui/list-picker Module
ListPicker Class

ネイティブコンポーネント

ANDROID IOS
android.widget.NumberPicker UIPickerView
入門
コアコンセプト
ユーザーインターフェース
ツール
ハードウェアアクセス
プラグインの開発
リリース
アプリテンプレート
パフォーマンスの最適化
フレームワークモジュール
ガイド
サポートを受ける
トラブルシューティング
Siedkick
NativeScriptドキュメントのライセンス