我有一个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."}];