@nativescript/picker

A NativeScript 插件，它提供了一个 UI 元素，用于从在模态弹出窗口中打开的列表中选择对象/值。

npm install @nativescript/picker

使用方法

• 配置
• 使用方法
• 功能
  • PickerField
• API

屏幕截图

配置

无需额外配置！

使用方法

要在标记中使用 PickerField，您需要

• 如果您正在开发 NativeScript Core 应用程序，您需要在 xml 中注册插件命名空间

<Page
   xmlns="http://schemas.nativescript.org/tns.xsd"
   xmlns:picker="@nativescript/picker">
   <picker:PickerField hint="Click here" items="{{ pickerItems }}"/>
...

或使用项目模板

<picker:PickerField focusOnShow="true" filterKeyName="name" showFilter="{{ enableFilter }}" pickerTitle="Nativescript Picker" rowHeight="60" id="picker" hint="Click here" textField="name" padding="10" pickerOpened="{{ pickerOpened }}" pickerClosed="{{ pickerClosed }}"
                    items="{{ pickerItems }}" >
    <picker:PickerField.itemTemplate>
        <GridLayout height="60">
            <Label text="{{ name}}" textWrap="true" verticalAlignment="center" />
            
        </GridLayout>
    </picker:PickerField.itemTemplate>
</picker:PickerField>

数据筛选

您可以通过设置 showFilter="true" 来筛选数据，默认情况下，插件将查看项目源中的 name 键，但您可以通过设置 filterKeyName="title" 来控制此操作，假设您的数据项包含标题键

通过设置 focusOnShow="true" 来聚焦搜索栏

let dataItems = new ObservableArray<{title: string, age: number}>();

for(let i = 0; i <= 30; i++) {
    dataItems.push({
        title: "Title" + i,
        age: 30 + i
    })
}

获取选中项

您需要从 pickerClosed 属性注册回调 pickerClosed="onSelectedItem"，这将返回 selectedIndex

onSelectedItem(args) {
    let index = args.object?.selectedIndex;
    console.log('Picker > closed', index);
    console.log('Picker > closed', dataItems[index].title);
}

样式

您可以通过这些 CSS 类来定位 Picker，例如： .pickerRootModal

• pickerRootModal 定位到 Modal
• pickerPage 定位到 Page
• pickerGridLayout 定位到包含所有视图的 GridLayout 包装器
• pickerListView 定位到 ListView
• pearchBarContainer 定位到搜索栏容器 StackLayout
• pickerSearchBar 定位到搜索栏 TextField

参见此处

• 如果您正在开发 NativeScript Angular 应用程序，您需要在组件模块中导入插件模块

import { NativeScriptPickerModule } from "@nativescript/picker/angular";
...
@NgModule({
    imports: [
        NativeScriptPickerModule,
        ...
    ],
    ...

然后您将能够在组件的 html 中声明字段

<PickerField hint="Click here" [items]="pickerItems"></PickerField>

自定义项目模板

您也可以在打开的列表中定义自己的项目模板

<PickerField hint="Click here" class="picker-field" textField="name" [pickerTitle]="'Select item from list'" [items]="items">
	<ng-template let-item="item">
		<GridLayout columns="auto, *" rows="auto, *">
			<Label text="Static text:" col="0"></Label>
			<Label [text]="item?.name" col="0" row="1"></Label>
			<Image [src]="item?.imageUrl" col="1" row="0" rowSpan="2"></Image>
		</GridLayout>
	</ng-template>
</PickerField>

使用以下绑定

interface IDataItem {
	name: string;
	id: number;
	description: string;
	imageUrl: string;
}

this.items = new ObservableArray<IDataItem>();
for (let i = 0; i < 20; i++) {
	this.items.push({
		name: 'Item ' + i,
		id: i,
		description: 'Description ' + i,
		imageUrl: 'https://picsum.photos/150/70/?random',
	});
}

• 如果您正在开发 NativeScript Vue 应用程序，您需要在 app.js 文件中安装插件

import Vue from 'nativescript-vue';
import PickerField from '@nativescript/picker/vue';

Vue.use(PickerField);

然后您将能够在组件的模板中声明字段

<PickerField hint="Click here"></PickerField>

功能

PickerField

PickerField 是一个 NativeScript TextField，这意味着默认 TextField 提供的任何功能在 PickerField 组件中也都可用。唯一的区别是，按照设计它处于“只读”模式，换句话说，您不能通过输入或选择来更改其文本。更改 PickerField 的文本是通过其主要功能来完成的，即打开一个模态弹出窗口，该窗口显示一个对象列表，您可以通过点击来从中选择一个。

API

PickerField

PickerField可以通过其元素选择器和设置一个类来在CSS中进行定位。此外，PickerField还会打开一个包含一个包含ActionBar和ListView的Page元素的模态窗口。该Page元素可以通过PickerPage选择器进行定位，并通过它使用选择器如PickerPage ActionBar和PickerPage ListView来样式化所有选择器模态。除此之外，如果在PickerField上设置了一个类，它将被转移到PickerPage上，并且你可以用它来样式化单个模态。