Question

我使用Material Design并尝试此代码：

{{1}}

这是什么意思？它显示2行1列？

Answer 1

Angular有一个很好的例子可以回答你的问题：https://material.angular.io/components/grid-list/examples

md-grid-list组件通过指定属性cols="4"来定义网格将具有的列数。然后提供一个md-grid-tile组件的列表（示例角度使用使用ngFor，我希望您熟悉它。）

因此，如果您想构建矩阵5v7，请尝试：

<md-grid-list cols="7" rowHeight="100px">
  <md-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    {{tile.text}}
  </md-grid-tile>
</md-grid-list>

和

@Component({
  selector: 'grid-list-dynamic-example',
  templateUrl: 'grid-list-dynamic-example.html',
})
export class GridListDynamicExample {
  tiles = [
    {text: 'One', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'},
    {text: '...', cols: 1, rows: 1, color: 'lightblue'},
  ];
}

Answer 2

让我分解一下，首先让我们来看看HTML

<md-grid-list cols="4" rowHeight="100px">
  <md-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    {{tile.text}}
  </md-grid-tile>
</md-grid-list>

cols属性，用于设置网格中的列数。因此，在这种情况下，每行被分为4列。

接下来就是将瓷砖传递给网格，如下所示：

tiles = [
{text: 'One', cols: 3, rows: 1, color: 'lightblue'},
{text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
{text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
{text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
];

此处标题中的每个对象都对应于角度材质网格中的项目。 rows属性用于设置每个项的高度，默认情况下，一行的高度为100px。因此，如果任何项目为rows: 2，则该项目的高度为200px。

参考：Angular grid-list documentaion和 https://material.angular.io/components/grid-list/examples

Grid Geular Material的工作原理如何？

2 个答案: