在 React 中建立響應式會議圖塊的動態網格系統

在遠端工作和虛擬會議時代，創建響應式動態網格系統來顯示參與者視訊圖塊至關重要。受到 Google Meet 等平台的啟發，我最近在 React 中開發了一個靈活的網格系統，可以無縫適應不同數量的參與者和不同的螢幕尺寸。在這篇文章中，我將引導您完成實現，解釋關鍵組件以及它們如何協同工作以創建高效且響應靈敏的佈局。

目錄

1. 簡介
2. 網格佈局定義
3. 選擇合適的網格佈局
4. useGridLayout 掛鉤
5. 用法範例
6. 設定網格樣式
7. 結論

介紹

建立動態網格系統涉及根據項目（或「圖塊」）數量和可用螢幕空間調整佈局。對於視訊會議應用程序，這可以確保每個參與者的視訊來源都能以最佳方式顯示，無論參與者數量或使用的設備如何。

我開發的解決方案利用 React hooks 和 CSS Grid 來動態管理和渲染網格佈局。讓我們深入了解該系統的核心組件。

網格佈局定義

首先，我們定義我們的系統可以使用的可能的網格佈局。每個佈局指定了列數和行數，以及對其可容納的最小和最大圖塊數量的限制。

import { useState, useEffect, RefObject } from 'react';

export type GridLayoutDefinition = {
  name: string;
  columns: number;
  rows: number;
  minTiles: number;
  maxTiles: number;
  minWidth: number;
  minHeight: number;
};

export const GRID_LAYOUTS: GridLayoutDefinition[] = [
  { columns: 1, rows: 1, name: '1x1', minTiles: 1, maxTiles: 1, minWidth: 0, minHeight: 0 },
  { columns: 1, rows: 2, name: '1x2', minTiles: 2, maxTiles: 2, minWidth: 0, minHeight: 0 },
  { columns: 2, rows: 1, name: '2x1', minTiles: 2, maxTiles: 2, minWidth: 900, minHeight: 0 },
  { columns: 2, rows: 2, name: '2x2', minTiles: 3, maxTiles: 4, minWidth: 560, minHeight: 0 },
  { columns: 3, rows: 3, name: '3x3', minTiles: 5, maxTiles: 9, minWidth: 700, minHeight: 0 },
  { columns: 4, rows: 4, name: '4x4', minTiles: 10, maxTiles: 16, minWidth: 960, minHeight: 0 },
  { columns: 5, rows: 5, name: '5x5', minTiles: 17, maxTiles: 25, minWidth: 1100, minHeight: 0 },
];

解釋

• GridLayoutDefinition：定義每個網格佈局屬性的 TypeScript 類型。
• GRID_LAYOUTS：預先定義佈局的陣列，依複雜度排序。每個佈局指定：
  • 列數和行數：網格中的列數和行數。
  • name：佈局的描述性名稱（例如“2x2”）。
  • minTiles 和 maxTiles：佈局可以容納的瓦片數量範圍。
  • minWidth 和 minHeight：佈局所需的最小容器尺寸。

選擇適當的網格佈局

根據圖塊數量和容器大小選擇正確網格佈局的核心邏輯封裝在 selectGridLayout 函數中。

function selectGridLayout(
  layouts: GridLayoutDefinition[],
  tileCount: number,
  width: number,
  height: number,
): GridLayoutDefinition {
  let currentLayoutIndex = 0;
  let layout = layouts.find((layout_, index, allLayouts) => {
    currentLayoutIndex = index;
    const isBiggerLayoutAvailable = allLayouts.findIndex((l, i) => 
      i > index && l.maxTiles === layout_.maxTiles
    ) !== -1;
    return layout_.maxTiles >= tileCount && !isBiggerLayoutAvailable;
  });

  if (!layout) {
    layout = layouts[layouts.length - 1];
    console.warn(`No layout found for: tileCount: ${tileCount}, width/height: ${width}/${height}. Fallback to biggest available layout (${layout?.name}).`);
  }

  if (layout && (width < layout.minWidth || height < layout.minHeight)) {
    if (currentLayoutIndex > 0) {
      const smallerLayout = layouts[currentLayoutIndex - 1];
      layout = selectGridLayout(
        layouts.slice(0, currentLayoutIndex),
        smallerLayout.maxTiles,
        width,
        height,
      );
    }
  }

  return layout || layouts[0];
}

它是如何運作的

1. 初始選擇：此函數迭代佈局數組以尋找 maxTiles 大於或等於tileCount 的第一個佈局，並確保不存在具有相同 maxTiles 的更大佈局可用。

2. 後備機制：如果沒有找到合適的佈局，則預設為最大的可用佈局並記錄警告。

3. 響應式調整：如果容器尺寸不符合所選佈局的 minWidth 或 minHeight 約束，則函數會遞歸選擇適合約束的較小佈局。

4. 最終返回：返回選定的佈局，確保網格足以容納圖塊數量並適合容器的大小。

useGridLayout 掛鉤

為了封裝網格選擇邏輯並使其可跨元件重複使用，我建立了 useGridLayout 自訂掛鉤。

export function useGridLayout(
  gridRef: RefObject<HTMLElement>,
  tileCount: number
): { layout: GridLayoutDefinition } {
  const [layout, setLayout] = useState<GridLayoutDefinition>(GRID_LAYOUTS[0]);

  useEffect(() => {
    const updateLayout = () => {
      if (gridRef.current) {
        const { width, height } = gridRef.current.getBoundingClientRect();
        const newLayout = selectGridLayout(GRID_LAYOUTS, tileCount, width, height);
        setLayout(newLayout);

        gridRef.current.style.setProperty('--col-count', newLayout.columns.toString());
        gridRef.current.style.setProperty('--row-count', newLayout.rows.toString());
      }
    };

    updateLayout();

    window.addEventListener('resize', updateLayout);
    return () => window.removeEventListener('resize', updateLayout);
  }, [gridRef, tileCount]);

  return { layout };
}

吊鉤斷裂

• 參數:

  • gridRef：對網格容器元素的參考。
  • tileCount：目前要顯示的圖塊數量。

• 狀態管理：使用 useState 來追蹤目前佈局，並使用 GRID_LAYOUTS 中的第一個佈局進行初始化。

• 效果掛鉤:

  • updateLayout 函數：檢索容器的寬度和高度，使用 selectGridLayout 選擇適當的佈局，並更新狀態。它還在容器上設定 CSS 變數 --col-count 和 --row-count 以進行樣式設定。
  • 事件監聽器：新增調整大小事件監聽器，以便在視窗大小改變時更新版面配置。在組件卸載時清理監聽器。

• 傳回值：提供目前佈局物件給使用元件。

用法範例

為了示範這個動態網格系統在實踐中如何運作，這裡有一個使用 useGridLayout 鉤子的範例 React 元件。

'use client'

import React, { useState, useRef, useEffect } from 'react'
import { Button } from "@/components/ui/button"
import { useGridLayout, GridLayoutDefinition } from './useGridLayout'

export default function Component() {
  const [tiles, setTiles] = useState<number[]>([1, 2, 3, 4]);
  const [containerWidth, setContainerWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1000);
  const gridRef = useRef<HTMLDivElement>(null);

  const { layout } = useGridLayout(gridRef, tiles.length);

  useEffect(() => {
    const handleResize = () => {
      setContainerWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const addTile = () => setTiles(prev => [...prev, prev.length + 1]);
  const removeTile = () => setTiles(prev => prev.slice(0, -1));

  return (
    <div className="flex flex-col items-center gap-4 p-4 w-full">
      <div className="flex flex-wrap justify-center gap-2 mb-4">
        <Button onClick={addTile}>Add Tile</Button>
        <Button onClick={removeTile}>Remove Tile</Button>
      </div>
      <div className="w-full border border-gray-300 p-4">
        <div 
          ref={gridRef} 
          className="grid gap-4"
          style={{
            gridTemplateColumns: `repeat(var(--col-count), 1fr)`,
            gridTemplateRows: `repeat(var(--row-count), 1fr)`,
          }}
        >
          {tiles.slice(0, layout.maxTiles).map((tile) => (
            <div key={tile} className="bg-primary text-primary-foreground p-4 rounded flex items-center justify-center">
              Tile {tile}
            </div>
          ))}
        </div>
      </div>
      <div className="text-center mt-4">
        <p>Current Layout: {layout.name} ({layout.columns}x{layout.rows})</p>
        <p>Container Width: {containerWidth}px</p>
        <p>Visible Tiles: {Math.min(tiles.length, layout.maxTiles)} / Total Tiles: {tiles.length}</p>
      </div>
    </div>
  )
}

組件分解

1. 狀態管理:

   • tiles: An array representing the current tiles. Initially contains four tiles.
   • containerWidth: Tracks the container's width, updating on window resize.

2. Refs:

   • gridRef: A reference to the grid container, passed to the useGridLayout hook.

3. Using the Hook:

   • Destructures the layout object from the useGridLayout hook, which determines the current grid layout based on the number of tiles and container size.

4. Event Handling:

   • Add Tile: Adds a new tile to the grid.
   • Remove Tile: Removes the last tile from the grid.
   • Resize Listener: Updates containerWidth on window resize.

5. Rendering:

   • Controls: Buttons to add or remove tiles.
   • Grid Container:
     • Uses CSS Grid with dynamic gridTemplateColumns and gridTemplateRows based on CSS variables set by the hook.
     • Renders tiles up to the layout.maxTiles limit.
   • Info Section: Displays the current layout, container width, and the number of visible versus total tiles.

What Happens in Action

• Adding Tiles: As you add more tiles, the useGridLayout hook recalculates the appropriate grid layout to accommodate the new number of tiles while respecting the container's size.
• Removing Tiles: Removing tiles triggers a layout recalculation to potentially use a smaller grid layout, optimizing space.
• Resizing: Changing the window size dynamically adjusts the grid layout to ensure that the tiles remain appropriately sized and positioned.

Styling the Grid

The grid's responsiveness is primarily handled via CSS Grid properties and dynamically set CSS variables. Here's a brief overview of how the styling works:

/* Example Tailwind CSS classes used in the component */
/* The actual styles are managed via Tailwind, but the key dynamic properties are set inline */

.grid {
  display: grid;
  gap: 1rem; /* Adjust as needed */
}

.grid > div {
  /* Example styles for tiles */
  background-color: var(--color-primary, #3490dc);
  color: var(--color-primary-foreground, #ffffff);
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

Dynamic CSS Variables

In the useGridLayout hook, the following CSS variables are set based on the selected layout:

• --col-count: Number of columns in the grid.
• --row-count: Number of rows in the grid.

These variables are used to define the gridTemplateColumns and gridTemplateRows properties inline:

style={{
  gridTemplateColumns: `repeat(var(--col-count), 1fr)`,
  gridTemplateRows: `repeat(var(--row-count), 1fr)`,
}}

This approach ensures that the grid layout adapts seamlessly without the need for extensive CSS media queries.

Conclusion

Building a dynamic grid system for applications like video conferencing requires careful consideration of both the number of elements and the available display space. By defining a set of responsive grid layouts and implementing a custom React hook to manage layout selection, we can create a flexible and efficient system that adapts in real-time to user interactions and screen size changes.

This approach not only enhances the user experience by providing an optimal viewing arrangement but also simplifies the development process by encapsulating the layout logic within reusable components. Whether you're building a video conferencing tool, a dashboard, or any application that requires dynamic content arrangement, this grid system can be a valuable addition to your toolkit.

Feel free to customize and extend this system to suit your specific needs. Happy coding!

以上是在 React 中建立響應式會議圖塊的動態網格系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！