Nativescript ListView只顯示一個項目

我可能會遵循一個關於pluralsight的課程，而且我遇到了一個奇怪的問題。我的列表視圖只顯示第一個元素，沒有其他東西。這很奇怪，我之前使用的列表視圖沒有問題，所以我不知道錯誤來自哪裏。Nativescript 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>

打字稿：

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 
    }); 
}

我懷疑是第一個列表項完全填充網格佈局然而放置一個邊框圍繞它表明，事實並非如此。

來源

2016-10-25 xerotolerant

也許問題已經由於以下事實：用於第二'GridLayout'第一個參數爲它'rows'財產造成是汽車，並且將無法正確顯示'ListView'。您應該將其更改爲'*'，例如''或指定ListView'height'。你也應該爲ListView指定'row'。 –

代碼中真正發生的事情是，您正在創建一個包含兩行的網格，然後默認情況下您的列表視圖將被設置爲第一行並設置爲「auto」。這個設置將給你的空間只有一個項目模板空間 - 事實上，你所有的項目都被加載並且可以滾動，但是有一個地方只能看到其中的一個。

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

來源

2016-10-25 06:51:03

謝謝。提交這些問題後的一段時間，我意識到他們都在加載，但我仍然無法弄清楚如何正確放置它們。我想我現在明白了。 – xerotolerant

Nativescript ListView只顯示一個項目

回答

相關問題