一行中的网格布局元素 - TypeScript

在 web 开发中，一种最常见的布局方式就是网格布局（Grid Layout），它能简化页面布局和设计，提高页面的可读性和易用性。而在 TypeScript 中，我们可以通过引入第三方库，如 react-grid-layout 或 ngx-grid，来快速实现网格布局。

react-grid-layout

react-grid-layout 是基于 React 的网格布局库。它提供了一个高度定制化的网格布局系统，可以在大量设备和屏幕尺寸上实现网格布局。

安装

首先我们需要安装依赖：

npm install react react-dom react-grid-layout

基础用法

我们可以通过以下代码实现简单的网格布局：

import React from 'react';
import GridLayout from 'react-grid-layout';

const MyGrid = () => {
  const layout = [
    { i: 'a', x: 0, y: 0, w: 1, h: 2 },
    { i: 'b', x: 1, y: 0, w: 1, h: 2 },
    { i: 'c', x: 2, y: 0, w: 1, h: 2 },
    { i: 'd', x: 0, y: 2, w: 1, h: 2 },
    { i: 'e', x: 1, y: 2, w: 1, h: 2 },
  ];

  return (
    <GridLayout className="layout" layout={layout} cols={3} rowHeight={100} width={1200}>
      <div key="a">a</div>
      <div key="b">b</div>
      <div key="c">c</div>
      <div key="d">d</div>
      <div key="e">e</div>
    </GridLayout>
  );
};

在上述代码中，我们首先定义了一个 layout 数组，它表示了每个网格元素的位置和大小。然后，我们将这个数组作为 layout 属性传递给 GridLayout 组件。cols, rowHeight 和 width 属性表示网格系统的列数、每行的高度和容器的宽度。

最后，我们在 GridLayout 组件里加入了五个 div 元素作为网格元素。因为我们已经在 layout 数组里为它们指定了位置和大小，所以它们会被正确地布局到网格系统里。

定义网格元素

网格元素的定义可以包含以下属性：

• i - Required. String. 网格元素的唯一标识符。
• x - Required. Number. 网格元素的起始列。
• y - Required. Number. 网格元素的起始行。
• w - Required. Number. 网格元素的列数。
• h - Required. Number. 网格元素的行数。
• minW - Optional. Number. 网格元素可调整的最小列数。
• maxW - Optional. Number. 网格元素可调整的最大列数。
• minH - Optional. Number. 网格元素可调整的最小行数。
• maxH - Optional. Number. 网格元素可调整的最大行数。

例如，我们可以这样定义一个网格元素：

{ i: 'a', x: 0, y: 0, w: 3, h: 2, minW: 2, maxW: 4, minH: 1, maxH: 3 }

在上述代码中，a 表示这个网格元素的唯一标识符；x: 0, y: 0 表示这个网格元素从网格系统的左上角起始位置开始，w: 3, h: 2 表示这个网格元素占据网格系统 3 列，2 行的空间；minW: 2, maxW: 4, minH: 1, maxH: 3 表示这个网格元素可调整的列数和行数的范围。

高级用法

除了基本用法之外，react-grid-layout 还提供了丰富的 API 和事件供我们使用，例如，我们可以通过设置 isDraggable 和 isResizable 属性来控制网格元素是否可以拖拽和调整大小；我们还可以监听 onDragStart 和 onResizeStart 等事件来分别处理网格元素拖拽和调整大小的操作。

下面是一个高级用法的例子：

import React from 'react';
import GridLayout, { WidthProvider, Layout }  from 'react-grid-layout';

const ResponsiveGridLayout = WidthProvider(GridLayout);

const MyGrid = () => {
  const [layouts, setLayouts] = React.useState<Record<string, Layout[]>>({
    lg: [{ i: 'a', x: 0, y: 0, w: 3, h: 2 }],
    sm: [{ i: 'a', x: 0, y: 0, w: 1, h: 2 }],
  });

  const handleLayoutChange = (newLayout: Layout[], allLayouts: Record<string, Layout[]>) => {
    setLayouts(allLayouts);
  };

  return (
    <ResponsiveGridLayout
      className="layout"
      layouts={layouts}
      cols={{ lg: 12, md: 10, sm: 6 }}
      breakpoints={{ lg: 1200, md: 996, sm: 768 }}
      rowHeight={100}
      onLayoutChange={handleLayoutChange}
      isDraggable
      isResizable
    >
      <div key="a">a</div>
    </ResponsiveGridLayout>
  );
};

在上述代码中，我们使用了高阶组件 WidthProvider 将 GridLayout 组件包裹起来，以响应容器宽度发生变化时的网格布局变化。

我们还创建了一个状态变量 layouts 和一个 handleLayoutChange 方法，并将它们分别传递给 ResponsiveGridLayout 组件的 layouts 属性和 onLayoutChange 属性。这样，我们就可以通过监听 onLayoutChange 事件来获取当前的网格布局，从而实现网格布局的自定义保存和调用。

ngx-grid

ngx-grid 是基于 Angular 的网格布局库。它提供了一套高度可定制化的网格布局组件和服务，可以在世界各地的浏览器和设备上实现网格布局。

安装

首先我们需要安装依赖：

npm install @angular/core @angular/common ngx-grid

基础用法

我们可以通过以下代码实现简单的网格布局：

<ngx-grid [config]="config">
  <ngx-grid-item ngxGridItem="item" *ngFor="let item of items">
    {{ item.text }}
  </ngx-grid-item>
</ngx-grid>

在上述代码中，我们首先为 ngx-grid 组件传递了一个配置对象 config，它指定了网格布局的一些参数，如 cols、maxCols、rowHeight 等。

然后，我们使用 ngx-grid-item 指令（directive）来创建网格元素，并将它们包裹在 ngx-grid 组件中。因为我们已经在每个网格元素上设置了 ngxGridItem="item"，所以在 ngx-grid-item 内部我们就可以将 item 对象的属性作为网格元素的各种参数，例如，[x]="item.x" 表示将 item 对象的 x 属性作为该网格元素的起始列。

最后，我们通过 *ngFor 循环创建了 5 个 ngx-grid-item 组件，为它们指定了不同的 x、y、w 和 h 属性，以实现自定义的网格布局。

定义网格元素

与 react-grid-layout 类似，我们也可以通过设置 ngx-grid-item 组件的各种属性来定义网格元素的位置和大小。下面是一些常用的属性：

• x - Required. Number. 网格元素的起始列。
• y - Required. Number. 网格元素的起始行。
• w - Required. Number. 网格元素的列数。
• h - Required. Number. 网格元素的行数。
• maxW - Optional. Number. 网格元素可调整的最大列数。
• minW - Optional. Number. 网格元素可调整的最小列数。
• minH - Optional. Number. 网格元素可调整的最小行数。
• maxH - Optional. Number. 网格元素可调整的最大行数。

例如，我们可以这样定义一个网格元素：

<ngx-grid-item
  [x]="1"
  [y]="1"
  [w]="3"
  [h]="2"
  [minW]="2"
  [maxW]="4"
  [minH]="1"
  [maxH]="3"
>
  a
</ngx-grid-item>

在上述代码中，[x]="1", [y]="1", [w]="3", [h]="2" 表示这个网格元素从网格系统的第 2 列（因为 cols 属性默认从 0 开始计数）、第 2 行开始，占据了 3 列、2 行的空间；[minW]="2", [maxW]="4", [minH]="1", [maxH]="3" 表示这个网格元素可调整的列数和行数的范围。

高级用法

与 react-grid-layout 类似，ngx-grid 也提供了许多 API 和事件供我们使用，例如，我们可以通过设置 resizable 属性来控制网格元素是否可以调整大小；我们还可以监听 dragStart 和 resizeStart 等事件来分别处理网格元素拖拽和调整大小的操作。

除此之外，ngx-grid 还提供了一些高级特性，如自动对齐、网格元素的旋转和锁定等功能。在使用这些高级特性时，请务必查看官方文档和示例，并结合实际需求进行调整。

下面是一个高级用法的例子：

<ngx-grid [config]="config" [style.backgroundImage]="bgImage">
  <ngx-grid-item
    ngxGridItem
    *ngFor="let item of items"
    [x]="item.x"
    [y]="item.y"
    [w]="item.w"
    [h]="item.h"
    [resizeEnabled]="item.resizeEnabled"
    [dragEnabled]="item.dragEnabled"
    [maxW]="item.maxW"
    [minW]="item.minW"
    [minH]="item.minH"
    [maxH]="item.maxH"
    [rotate]="item.rotate || 0"
    [snapToGrid]="item.snapToGrid"
    (mousedown)="onDragStart($event, item)"
    (touchstart)="onDragStart($event, item)"
    (resizeStart)="onResizeStart($event, item)"
  >
    {{ item.text }}
  </ngx-grid-item>
</ngx-grid>

在上述代码中，我们不仅为 config 对象指定了更多的参数，包括 margin、outerMargin、draggable 和 resizable 常量等，还为每个 ngx-grid-item 手动设置了更多的属性，如 resizeEnabled、dragEnabled、maxW、minW、minH、maxH 等。

除此之外，我们还为 ngx-grid-item 组件绑定了一些事件，如 mousedown、touchstart 和 resizeStart 等，来分别处理网格元素的拖拽和调整大小的操作。在这些事件中，我们可以通过事件对象和当前网格元素的属性来计算出新的位置和大小，并将其保存到状态中以进行更新。