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”的第一行中。此设置将为您提供仅与一个项目模板空间一样大的空间 - 事实上，您的所有项目都已加载并且可以滚动，但有一个地方只能显示其中一个。

将自动更改为*或删除嵌套的网格布局。为了确保您能够控制在确切的位置显示哪个元素，我建议您始终使用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只显示一个项目

3 个答案: