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>

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

Answer 1

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

如何用2列卡片创建网格[Nativescript和Angular]

1 个答案: