如何创建包含 2 列卡片的网格 [原生脚本和角度]

Question

需要网格是这样的：

card1 card2
card3 card4
...

并且要充满活力

这是我的尝试：

元件：

export class MenusComponent implements OnInit {
  public menus: any;
  constructor() { 
    this.menus = [
      {
        image: 'https://www.ducksdailyblog.com/wp-content/uploads/2018/12/Wooden-Post-Country-Fences-Direction.jpg',
        title: 'Jelovnik'
      },
      {
        image: 'https://www.ducksdailyblog.com/wp-content/uploads/2018/12/Wooden-Post-Country-Fences-Direction.jpg',
        title: 'Pica'
      },
      {
        image: 'https://www.ducksdailyblog.com/wp-content/uploads/2018/12/Wooden-Post-Country-Fences-Direction.jpg',
        title: 'Dorucak'
      }
    ]
  }

这是我的尝试：

<GridLayout columns="*,*" rows="*">
<ListView class="list-group" [items]="menus">
    <ng-template let-menu="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout [col]="even ? 0 : 1">
            <Label [text]="menu.title"></Label>
            <Image height="108" width="100%" [src]="menu.image"></Image>
        </StackLayout>
    </ng-template>
</ListView>

我需要能够在列表视图中添加 mre 内容，因此我认为也应该有 anoter 网格。正确的方法是什么？卡片需要相等并占据整个屏幕。

Answer 1

使用 ListViewStaggeredLayout 对我有用，这里是参考：https://docs.nativescript.org/angular/ui/ng-components/ng-radlistview/item-layouts