使用离子网格具有duolingo-ish风格

Question

我想知道如何构建一个看起来像Duolingo界面的布局。我有一个数组，其中包含应显示的按钮，它们应成对排列，如果是奇数元素，则应该是集中的。

但我还没弄清楚如何制作这样的界面。有没有办法制作它？我正在构建它的方式，到目前为止，我只在每一行中放置一个项目。

HTML：

[ex('a', 15.5), ex('b', 5.0),  ex('c', -8.0)]

这就是我期望它的样子：

Answer 1

如果他们是静态按钮，你知道它们有多少吗？如果是这样，你可以尝试这样的内部：

您的.TS文件

obj: any[] = [
    [
        { icon: 'star', button: 'bla' },
        { icon: 'trash', button: 'bla' }
    ],
    [
        { icon: 'eye', button: 'bla' }
    ],
    [
        { icon: 'star', button: 'bla' },
        { icon: 'eye', button: 'bla' },
        { icon: 'trash', button: 'bla' }
    ]
];

您的HTML文件

<ion-grid>
  <ion-row *ngFor="let row of obj; let i = index">
    <ion-col *ngFor="let col of obj[i]" text-center>
      <ion-icon name="{{col.icon}}"></ion-icon>
    </ion-col>
  </ion-row>
</ion-grid>