8.7 版本发布—WinterCG 兼容性第一部分
了解更多

NativeScript UI ListView ​

注意

此文档目前正在开发中，正在从以前的文档迁移。您可以访问此处正在迁移的文档。

概述 ​

NativeScript UI ListView 插件是一个虚拟化列表组件，提供与使用项目列表场景相关的最常用功能。所有这些功能都嵌入到一个控件中，旨在节省开发人员时间并提供更好的体验。主要功能包括

  • 项目动画
  • 不同的布局和方向
  • 许多手势的智能默认值 - 长按选择，滑动执行特殊操作，长按并拖动重新排序项目，仅在需要时通过滑动刷新列表或加载更多项目。

安装 ​

在命令提示符/终端中导航到您的应用程序根文件夹并运行

cli
npm install nativescript-ui-listview

功能 ​

不同的布局 RadListView 支持三种不同的项目布局策略，这些策略通常用于移动应用程序

列表 - 项目堆叠 - 根据滚动方向水平或垂直堆叠。

网格 - 项目排列成列或行 - 根据滚动方向。

交错网格 - 项目以交错网格形式排序 - 根据滚动方向排列成行或列。

所有布局都是虚拟化的，并且针对移动设备进行了优化。

选择 ​

用于 NativeScript 的 RadListView 公开了 API，允许您启用项目选择和跟踪选择更改。

使用选择机制时，可以使用两种选择模式

  • 单选
  • 多选

RadListView 还公开了方便的 API，用于以编程方式选择或取消选择项目并获取当前选定的项目。RadListView 公开了以下方法来管理选择

  • selectAll() - 选择数据源中所有可用的项目
  • deselectAll() - 取消选择数据源中所有当前选定的项目
  • selectItemAt(index) - 选择指定索引处的项目
  • deselectItemAt(index) - 如果已选择，则取消选择指定索引处的项目
  • isItemSelected(item) - 确定提供的项目是否已选择
  • getSelectedItems() - 返回当前选定项目的数组

在 RadListView 中启用选择 ​

selectionBehavior 属性的值决定了项目选择的工作方式。它接受来自 ListViewSelectionBehavior 枚举的值

  • ListViewSelectionBehavior.None - 无法选择项目
  • ListViewSelectionBehavior.Press - 通过点击项目来选择项目
  • ListViewSelectionBehavior.LongPress - 通过按住项目来选择项目

此外，multipleSelection 属性的值决定了将使用哪种选择模式。可用选项为

  • 多选模式 - 允许选择多个项目。RadListView 会跟踪哪些项目已选中，并通过 getSelectedItems() 方法公开它们。通过将 multipleSelection 属性设置为 true 来启用多选。
  • 单选模式 - 每次只能选择一个项目。通过将 multipleSelection 属性设置为 false 来启用此模式。

在 XML 中启用 RadListView 的多选 ​

处理选择事件 ​

为了在项目的选择状态发生变化时通知您，RadListView 公开了以下事件

  • itemSelecting - 在选择项目之前触发。可用于取消操作。
  • itemSelected - 成功选择项目后触发。此时，该项目已存在于 getSelectedItems() 方法返回的已选中项目数组中。
  • itemDeselecting - 在取消选择项目之前触发。可用于取消操作。
  • itemDeselected - 成功取消选择项目后触发。此时，该项目不再是 getSelectedItems() 方法返回的已选中项目数组的一部分。

示例 ​

单选 ​

/// 风格：普通

xml
<GridLayout orientation="vertical" rows="auto, *, auto">
  <lv:RadListView
    id="listView"
    items="{{ dataItems }}"
    row="1"
    selectionBehavior="Press"
    itemSelected="onItemSelected"
    itemDeselected="onItemDeselected"
  >
    <lv:RadListView.itemTemplate>
      <StackLayout orientation="vertical" paddingLeft="16">
        <Label fontSize="20" text="{{ itemName }}" />
        <Label fontSize="13" text="{{ itemEmail }}" />
      </StackLayout>
    </lv:RadListView.itemTemplate>
  </lv:RadListView>
  <Label id="txtSelection" textWrap="true" row="2" />
</GridLayout>
ts
export function onItemSelected(args) {
  const selectedItems = listView.getSelectedItems()
  let selectedTitles = 'Selected items: '
  for (let i = 0; i < selectedItems.length; i++) {
    selectedTitles += selectedItems[i].itemName

    if (i < selectedItems.length - 1) {
      selectedTitles += ', '
    }
  }

  lblSelection.text = selectedTitles
}

export function onItemDeselected(args) {
  const selectedItems = listView.getSelectedItems()
  let selectedTitles = 'Selected items: '
  for (let i = 0; i < selectedItems.length; i++) {
    selectedTitles += selectedItems[i].itemName

    if (i < selectedItems.length - 1) {
      selectedTitles += ', '
    }
  }

  lblSelection.text = selectedTitles
}

///

多选 ​

/// 风格：普通

xml
<Page
  loaded="onPageLoaded"
  xmlns:lv="nativescript-ui-listview"
  xmlns="http://www.nativescript.org/tns.xsd"
>
  <lv:RadListView
    id="listView"
    items="{{ dataItems }}"
    row="1"
    selectionBehavior="Press"
    multipleSelection="true"
  >
    <lv:RadListView.itemTemplate>
      <StackLayout orientation="vertical" android:paddingLeft="16" ios:paddingLeft="50">
        <Label fontSize="20" text="{{ name }}" />
      </StackLayout>
    </lv:RadListView.itemTemplate>
  </lv:RadListView>
</Page>

///

编程选择 ​

/// 风格：普通

xml
<Page
  loaded="onPageLoaded"
  xmlns:lv="nativescript-ui-listview"
  xmlns="http://www.nativescript.org/tns.xsd"
>
  <GridLayout orientation="vertical" rows="auto, *">
    <lv:RadListView
      items="{{ dataItems }}"
      row="1"
      id="listView"
      multipleSelection="true"
      selectionBehavior="Press"
    >
      <lv:RadListView.itemTemplate>
        <StackLayout orientation="vertical" ios:paddingLeft="50" android:paddingLeft="16">
          <Label fontSize="20" text="{{ itemName }}" />
          <Label fontSize="14" text="{{ itemEmail }}" />
        </StackLayout>
      </lv:RadListView.itemTemplate>
    </lv:RadListView>
  </GridLayout>
</Page>
ts
export function onPageLoaded(args) {
  const page = args.object
  listView = page.getViewById('listView')
}

export function onSelectItemAtTap(args) {
  listView.selectItemAt(Number(txtSelectItemIndex.text))
}

export function onDeselectItemAtTap(args) {
  listView.deselectItemAt(Number(txtDeselectItemIndex.text))
}

export function onSelectAllTap(args) {
  listView.selectAll()
}

export function onDeselectAllTap(args) {
  listView.deselectAll()
}

///

第一个可见索引 ​

getFirstVisiblePosition() 返回列表视图中的第一个可见位置。

/// 风格：普通

ts
import { RadListView } from 'nativescript-ui-listview'

let myList: RadListView

export function onPageLoaded(args) {
  const page = args.object as Page
  myList = page.getViewById('myList') as RadListView
}

export function getTheFirstVisiblePositionOfTheList() {
  const firstVisibleIndex = myList.getFirstVisiblePosition()
  console.log('First visible index:', firstVisibleIndex)
}

///

水平布局 ​

/// 风格：普通

xml
<lv:RadListView items="{{ dataItems }}" horizontalAlignement="center">
  <lv:RadListView.itemTemplate>
    <StackLayout orientation="vertical">
      <Label fontSize="20" text="{{ itemName }}" />
      <Label fontSize="14" text="{{ itemDescription }}" textWrap="true" />
    </StackLayout>
  </lv:RadListView.itemTemplate>
  <lv:RadListView.listViewLayout>
    <lv:ListViewLinearLayout scrollDirection="Horizontal" />
  </lv:RadListView.listViewLayout>
</lv:RadListView>

///

下拉刷新 ​

pullToRefresh - 设置为 true 以启用下拉刷新功能。

pullToRefreshInitiated - 用于启动更新列表视图项目的数据处理的事件。

/// 风格：普通

xml
<lv:RadListView
  items="{{ dataItems }}"
  pullToRefresh="true"
  pullToRefreshInitiated="{{ onPullToRefreshInitiated }}"
>
  <lv:RadListView.itemTemplate>
    <StackLayout
      orientation="vertical"
      padding="5 10 5 10"
      style="background-color: #7fff7f;"
    >
      <StackLayout
        orientation="horizontal"
        padding="10"
        style="background-color: #65a565;"
      >
        <img:Img height="100" width="80" src="{{ image }}" />
        <StackLayout orientation="vertical" marginLeft="15">
          <Label fontSize="20" text="{{ name }}" marginBottom="8" />
          <Label
            fontSize="14"
            text="{{ title }}"
            style="font-weight: bold;"
            textWrap="true"
          />
          <Label fontSize="12" text="{{ text }}" color="White" textWrap="true" />
        </StackLayout>
      </StackLayout>
    </StackLayout>
  </lv:RadListView.itemTemplate>
</lv:RadListView>
ts
import { ListViewEventData } from 'nativescript-ui-listview'

async onPullToRefreshInitiated(args: ListViewEventData) {
    // some operation to fetch more data items from a backend service/API
    const data = await someHttpCall()
    if (data) {
        // add the data to your existing observable array bound to the RLV Items
        const listView = args.object;
        listView.notifyPullToRefreshFinished();
    }
}

///

文档 ​

API 参考 ​

此处 是 API 参考部分。

上一页
存储