代码之家 › 专栏 › 技术社区 › Daryl

如何在NativeScript中嵌套列表视图

nativescript-angular nativescript

Daryl · 技术社区 · 6 年前

我正在试图显示项目列表中的项目列表。基本上这是一个纸牌游戏,每一套牌都被重复,然后每一套牌的每一张牌都被重复。

<StackLayout margin="10 0 60 0" padding="0 0">
    <ListView class="list-group" [items]="hand" (itemTap)="onItemTap($event)"
        (itemLoading)="onItemLoading($event)" backgroundColor="#26252A"
        style="height:100%">
        <ng-template let-suit="item">
            <FlexboxLayout flexDirection="row">
                <ScrollView orientation="horizontal">
                        <StackLayout height="100" orientation="horizontal" margin="2.5, 15">
                            <ListView class="list-group" [items]="suit.cards">
                                <ng-template let-card="item">
                                    <Label [text]="card" class="card"></Label>
                                </ng-template>
                        </ListView>
                    </StackLayout>
                </ScrollView>
            </FlexboxLayout>
        </ng-template>
    </ListView>
</StackLayout>

这就是我的“手”的样子:

hand: { suit: Suit, fontColor: Color, cards: string[] }[] = [
    { suit: "Red", fontColor: new Color("red"), cards: ["14", "13"] },
    { suit: "Green", fontColor: new Color("green"), cards: ["14", "13", "12", "9"] },
    { suit: "Yellow", fontColor: new Color("yellow"), cards: ["14", "13", "10", "9"] },
    { suit: "Black", fontColor: new Color("black"), cards: ["14", "13", "9"] }
];

不过,当我运行它时,我只得到每一套衣服中要显示的第一张卡片。

你可以在这里的操场上看看:

https://play.nativescript.org/?template=play-ng&id=XfogFt&v=3

(我对nativescript和angular都是新手,所以我可能遗漏了一些简单的东西)

2 回复 | 直到 6 年前

Narendra 6 年前

编辑:不建议使用嵌套的ListView,因为这样会破坏对包含嵌套列表视图

您不需要在ng模板中有滚动视图,如果您只删除它,它将显示父列表每行中的所有项目。

我已经更新了操场 here . 您还可以在此处使用itemheight和itemwidth属性进行大小调整。

另外,itemHeight和itemWidth属性是特定于iOS的。如果不使用,则根据源数据动态调整项目大小。

Manoj 6 年前

正如@narendra提到的,不建议在模板内部使用嵌套列表视图或ngfor。

我猜 nativescript-accordion 插件将满足您的需要,它基本上支持您正在查找的数据结构-列表项-列表项(suit->卡)。如果要显示加载时展开的项,只需用所有索引填充SelectedIndex。有 one issue 插件的最新版本,仍然可以通过简单的数学处理。

Preventing collapse 轻敲仍然是一个开放的功能请求,但可以通过覆盖来实现。但据我所知,这个插件可能是嵌套列表视图唯一可行的解决方案。