android - Nativescript ListView 仅显示一项

Question

我正在学习复数视觉类(class)，但遇到了一个奇怪的问题。我的 ListView 只显示第一个元素，没有别的。这很奇怪，我以前使用 ListView 没有问题，所以我不确定错误来自哪里。

布局:

    <Page xmlns="http://schemas.nativescript.org/tns.xsd"
 loaded="pageLoaded">
  <GridLayout rows="auto, *">
    <!-- Header -->
    <StackLayout cssClass="page-header">
      <Label text="Header" cssClass="page-title bold" horizontalAlignment="center" margin="15"/>
    </StackLayout>

    <!-- Sessions Views -->
    <GridLayout rows="auto, *" row="1"> 

      <ListView items="{{ sessions }}">
        <ListView.itemTemplate>
          <Label text="{{ title }}"/>
        </ListView.itemTemplate>
      </ListView>

    </GridLayout>
  </GridLayout>
</Page>

typescript :

import { EventData, Observable } from "data/observable";
import { Page } from "ui/page";

var page: Page;
var tempSessions = [
    {
        id: '0',
        title: "Stuff"
    },
    {
        id: '1',
        title: "Stuffly"
    },
    {
        id: '2',
        title: "Stufferrs"
    },
    {
        id: '3',
        title: "Event 4"
    }
];
export function pageLoaded(args: EventData){
    console.log(JSON.stringify(tempSessions));
    page = <Page>args.object;
    page.bindingContext = new Observable({
        sessions: tempSessions
    });
}

我怀疑第一个列表项完全填满了 gridLayout，但是在它周围放置一个边框表明它不是。

Answer 1

您的代码中真正发生的是您正在创建一个包含两行的网格，然后默认情况下您的 ListView 被放置在第一行并设置为“自动”。此设置将为您提供与一个项目模板空间一样大的空间 - 事实上，您的所有项目都已加载并且可以滚动，但有一个地方只能显示其中一个项目。

将 auto 更改为 * 或删除嵌套的网格布局。只是为了确保您可以控制在确切位置显示的元素，我还建议始终使用 row="col="声明您在网格中的位置，即使是在非常简单的架构中也是如此。

例子:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <GridLayout rows="auto, *">
    <!-- Header -->
    <StackLayout row="0" cssClass="page-header">
      <Label text="Header" cssClass="page-title bold" horizontalAlignment="center" margin="15"/>
    </StackLayout>

    <!-- Sessions Views -->
    <ListView row="1" items="{{ sessions }}">
      <ListView.itemTemplate>
        <Label text="{{ title }}"/>
      </ListView.itemTemplate>
    </ListView>

  </GridLayout>
</Page>