Membina Sistem Grid Dinamik untuk Jubin Mesyuarat Responsif dalam React

Dalam era kerja jauh dan mesyuarat maya, mewujudkan sistem grid responsif dan dinamik untuk memaparkan jubin video peserta adalah penting. Diilhamkan oleh platform seperti Google Meet, saya baru-baru ini membangunkan sistem grid fleksibel dalam React yang menyesuaikan dengan lancar kepada bilangan peserta yang berbeza-beza dan saiz skrin yang berbeza. Dalam catatan blog ini, saya akan membimbing anda melalui pelaksanaan, menerangkan komponen utama dan cara ia berfungsi bersama untuk mencipta reka letak yang cekap dan responsif.

Jadual Kandungan

1. Pengenalan
2. Takrif Reka Letak Grid
3. Memilih Reka Letak Grid yang Sesuai
4. Kait useGridLayout
5. Contoh Penggunaan
6. Menggayakan Grid
7. Kesimpulan

pengenalan

Mencipta sistem grid dinamik melibatkan pelarasan reka letak berdasarkan bilangan item (atau "jubin") dan hartanah skrin yang tersedia. Untuk aplikasi persidangan video, ini memastikan bahawa setiap suapan video peserta dipaparkan secara optimum, tanpa mengira bilangan peserta atau peranti yang digunakan.

Penyelesaian yang saya bangunkan memanfaatkan cangkuk React dan Grid CSS untuk mengurus dan menjadikan reka letak grid secara dinamik. Mari kita selami komponen teras sistem ini.

Definisi Susun Atur Grid

Pertama, kami mentakrifkan kemungkinan susun atur grid yang boleh digunakan oleh sistem kami. Setiap reka letak menentukan bilangan lajur dan baris, serta kekangan pada bilangan minimum dan maksimum jubin yang boleh ditampungnya.

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 },
];

Penjelasan

• GridLayoutDefinition: Jenis TypeScript yang mentakrifkan sifat setiap reka letak grid.
• GRID_LAYOUTS: Satu susunan susun atur yang dipratentukan, disusun mengikut kerumitan. Setiap susun atur menentukan:
  • lajur dan baris: Bilangan lajur dan baris dalam grid.
  • nama: Nama deskriptif untuk reka letak (mis., '2x2').
  • minTiles dan maxTiles: Julat kiraan jubin yang boleh dimuatkan oleh reka letak.
  • minWidth dan minHeight: Dimensi bekas minimum yang diperlukan untuk reka letak.

Memilih Susun Atur Grid yang Sesuai

Logik teras untuk memilih susun atur grid yang betul berdasarkan bilangan jubin dan saiz bekas terkandung dalam fungsi 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];
}

Bagaimana Ia Berfungsi

1. Pemilihan Awal: Fungsi ini berulang melalui tatasusunan susun atur untuk mencari susun atur pertama dengan maxTiles lebih besar daripada atau sama dengan tileCount dan memastikan tiada susun atur yang lebih besar dengan maxTiles yang sama tersedia.

2. Mekanisme Fallback: Jika tiada reka letak yang sesuai ditemui, ia lalai kepada reka letak terbesar yang tersedia dan log amaran.

3. Pelarasan Responsif: Jika kekangan minWidth atau minHeight reka letak yang dipilih tidak dipenuhi oleh dimensi bekas, fungsi secara rekursif memilih reka letak yang lebih kecil yang sesuai dengan kekangan.

4. Pemulangan Akhir: Reka letak yang dipilih dikembalikan, memastikan bahawa grid kedua-duanya mencukupi untuk bilangan jubin dan sesuai dengan saiz bekas.

Cangkuk useGridLayout

Untuk merangkum logik pemilihan grid dan menjadikannya boleh digunakan semula merentas komponen, saya mencipta cangkuk tersuai 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 };
}

Pecah Cangkuk

• Parameter:

  • gridRef: Rujukan kepada elemen bekas grid.
  • tileCount: Bilangan jubin semasa untuk dipaparkan.

• Pengurusan Negeri: Menggunakan useState untuk menjejaki reka letak semasa, memulakan dengan reka letak pertama dalam GRID_LAYOUTS.

• Cangkuk Kesan:

  • Fungsi Reka Letak kemas kini: Mendapatkan semula lebar dan ketinggian bekas, memilih reka letak yang sesuai menggunakan selectGridLayout dan mengemas kini keadaan. Ia juga menetapkan pembolehubah CSS --col-count dan --row-count pada bekas untuk penggayaan.
  • Pendengar Acara: Menambah pendengar acara ubah saiz untuk mengemas kini reka letak apabila saiz tetingkap berubah. Membersihkan pendengar semasa dinyahlekap komponen.

• Nilai Pulangan: Menyediakan objek reka letak semasa kepada komponen yang digunakan.

Contoh Penggunaan

Untuk menunjukkan cara sistem grid dinamik ini berfungsi secara praktikal, berikut ialah contoh komponen React yang menggunakan cangkuk useGridLayout.

'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>
  )
}

Pecahan Komponen

1. Pengurusan Negeri:

   • 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!

Atas ialah kandungan terperinci Membina Sistem Grid Dinamik untuk Jubin Mesyuarat Responsif dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!