Nativescript RadListView StaggeredLayout问题

时间:2018-10-15 23:08:14

标签: nativescript angular2-nativescript nativescript-telerik-ui

我有一个Nativescript Angular项目,我在其中使用RadListView尝试使用交错布局。它在Android上运行良好,但在iOS上存在间距问题,我无法弄清楚是什么原因造成的。

HTML

<GridLayout class="page page-content" rows="*">
        <GridLayout margin="10">
                <RadListView height="100%" [items]="dataItems">
                        <ng-template tkListItemTemplate let-item="item" backgroundColor="transparent">
                                <StackLayout rows="auto, auto" borderWidth="1" borderColor="#ccc" margin="10">
                                        <Label class="h3" [text]="item.name"></Label>
                                        <Label class="descriptionLabel" [text]="item.description" textWrap="true"></Label>
                                </StackLayout>
                        </ng-template>
                        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout>
                </RadListView>
        </GridLayout>
</GridLayout>

TypeScript

dataItems = [{name: "Item 1", description: "Lorem ipsum dolor sit amet."},
                 {name: "Item 2", description: "Maecenas ac massa eu odio porta efficitur at non leo"}, 
                 {name: "Item 3", description: "Nunc vitae tortor sodales, varius magna quis, faucibus justo."},
                 {name: "Item 4", description: "In finibus sem"},
                 {name: "Item 5", description: "Duis sed sem porttitor"}, 
                 {name: "Item 6", description: "Blandit est vel, viverra nisi."},
                 {name: "Item 7", description: "Etiam at nisl ultricies, consectetur libero non, iaculis est."},
                 {name: "Item 8", description: "Curabitur at lorem"}, 
                 {name: "Item 9", description: "Non lectus tempus congue ultricies eget tellus."},
                 {name: "Item 10", description: "In sed dolor sit amet velit tempus iaculis."},
                 {name: "Item 11", description: "Duis dictum nunc in neque"},
                 {name: "Item 12", description: "Mauris dignissim mi sit amet nulla tristique, id posuere urna volutpat mauris gravida purus."},
                 {name: "Item 13", description: "Etiam accumsan sapien eget eros convallis porttitor."}, 
                 {name: "Item 14", description: "Vivamus ac arcu"},
                 {name: "Item 15", description: "Vestibulum at elit eget sapien fringilla"},
                 {name: "Item 16", description: "Maecenas tempus enim et velit bibendum, eu consequat erat volutpat."}]; 

1 个答案:

答案 0 :(得分:0)

无论有没有额外的GridLayouts,我都无法重现此问题。至少在我看来,这些布局实际上并不是必需的。这是link to Playground