Nativescript ListView 仅显示一项

Question

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

布局：

    <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>

打字稿：

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

您的代码中真正发生的是，您正在创建一个包含两行的网格，然后默认情况下您的列表视图被放置在设置为 "auto" 的第一行中。此设置将为您提供 space 仅与一个项目模板 space 一样大 - 事实上，您的所有项目都已加载并且可以滚动，但只有一个地方可以可视化其中一个。

将 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>

Answer 2

我遇到了同样的问题。我还注意到 ListView 中 Android 上的一行确实滚动了。我将高度添加到 ListView 并且一切正常。

<GridLayout rows="*" class="SSGridLayout"> 
    <ListView items="{{ calcItems }}" itemTap="onItemTap" height="280"> 
        <ListView.itemTemplate>
            <GridLayout columns="auto, auto, auto, auto, auto, auto" rows="*" class="SSGridLayout"> 
                <Label text="{{ year }}" class="ScrollDataField" width="{{ widthB }}" col="1" textWrap="false" />
            </GridLayout>
        </ListView.itemTemplate>
    </ListView>
</GridLayout>

Answer 3

添加到 Nick Iliev 关于列表高度的回答中，我能够通过将一个元素的高度乘以列表的长度来使列表的高度动态缩放到其元素的大小，就像这样。

<ScrollView height="{{ notes, notes.length*90 }}">
  <ListView class="list-group" items="{{ notes }}" height="100%">
    <ListView.itemTemplate>
      <StackLayout class="m-b-2 m-x-2">
            <Label class="h3 far p-l-15 text-gray m-b-1" text="{{user.username}}" />
           <TextField class="h3 input-border-rounded input-border-disabled p-y-5" 
                      text="{{ note }}" editable="false" />
      </StackLayout>
    </ListView.itemTemplate>
  </ListView>
</ScrollView>

Nativescript ListView 仅显示一项

Nativescript ListView showing only one item

android

typescript

nativescript