GridLayout ngfor行列

Question

我是Nativescript的新手，我对ngFor有问题。我在ngFor的StackLayout中有这个GridLayout，问题是如何在StackLayout中设置动态col和row？ 坦。

<GridLayout columns="*,*,*" rows="{{ totalRows }}" class="grid-book">
   <StackLayout *ngFor="let plan of plans; let i = index" row="0" col="0" horizontalAlignment="stretch">
      <StackLayout height="150" class="book">
         <AbsoluteLayout height="150">
            <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
            <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
         </AbsoluteLayout>
      </StackLayout>
      <Label text="{{ plan.name }}"></Label>
   </StackLayout>
</GridLayout>

Answer 1

您有固定的列数（3）和无限制的行数（totalRows）。我建议不要使用一个大的GridLayout来填充StackLayout，而应该使用ngFor最外层的Layout来制作一个StackLayout，然后将带有1行3列的GridLayout放入该循环模板中。

类似这样的东西：

<StackLayout *ngFor="let plan of plans">
    <GridLayout rows="*" columns="* * *">
        <Label text="A" col="0"></Label>
        <Label text="B" col="1"></Label>
        <Label text="C" col="2"></Label>
    </GridLayout>
</StackLayout>

一旦有了基本的循环和布局，就可以用自定义的每单元模板替换标签。如果使用此Grid-inside-Stack技术，则不需要i / index或totalRows字符串值。

Answer 2

在这种情况下，可以将index辅助到i。 我已经在html中测试了以下情况。

<GridLayout columns="*,*,*"  class="grid-book">
  <StackLayout *ngFor="let plan of plans; let i = index" row="{{i}}" col="0" horizontalAlignment="stretch">
    <StackLayout height="150" class="book">
      <AbsoluteLayout height="150">
        <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
        <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
      </AbsoluteLayout>
    </StackLayout>
    <Label text="{{ plan.name }}"></Label>
  </StackLayout>
</GridLayout>

和我的.ts文件plans = [{ 'name': 'Name 1' }, { 'name': 'Name 2' }, { 'name': 'Name 3' }];

，如果您看到使用调试器的输出

Answer 3

您可以在行/列上使用属性绑定以使其保持动态。但是，如果GridLayout中有很多分区（例如20或25+），您将很容易遇到性能问题。

我认为您应该使用StackLayout垂直堆叠彼此相邻的项目，并在每个项目内部使用GridLayout划分列。如果可能的话，我也建议使用ListView而不是ngFor。