Material UI 的 Layout Image List 组件是一个强大的工具，用于以响应式的方式展示图像。它特别适用于需要展示图像网格的应用场景，比如相册、产品展示等。本篇博客将详细介绍 Layout Image List 的使用，包括基本用法、属性、方法及与其他组件结合的示例。

1. 安装 Material UI

首先，确保你已经在项目中安装了 Material UI：

npm install @mui/material @emotion/react @emotion/styled

2. Image List 组件概述

ImageList 组件用于展示一组图像，支持响应式布局和不同的排列方式。你可以通过设置不同的属性来控制图像的显示效果。

2.1 基本用法

以下是一个基本的 ImageList 组件示例：

import React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';

function BasicImageList() {
  const itemData = [
    {
      img: 'https://via.placeholder.com/200',
      title: 'Image 1',
    },
    {
      img: 'https://via.placeholder.com/200',
      title: 'Image 2',
    },
    {
      img: 'https://via.placeholder.com/200',
      title: 'Image 3',
    },
  ];

  return (
    <ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
      {itemData.map((item) => (
        <ImageListItem key={item.img}>
          <img
            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
            srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
            alt={item.title}
            loading="lazy"
          />
        </ImageListItem>
      ))}
    </ImageList>
  );
}

export default BasicImageList;

3. Image List 组件的属性

ImageList 和 ImageListItem 组件提供了一些非常实用的属性，以下是主要属性的详细介绍：

3.1 ImageList 属性

• cols: number

  • 默认值: 2
  • 描述: 设置每行显示的列数。

• rowHeight: number | 'auto'

  • 默认值: 164
  • 描述: 设置每行的高度，可以使用固定数值或 'auto'。

• gap: number

  • 默认值: 0
  • 描述: 设置图像之间的间距。

• variant: string

  • 描述: 设置列表的变体。可选值有：
    • 'masonry': 瓦片布局
    • 'quilted': 拼图布局
    • 'standard': 标准布局
    • 'woven': 交织布局

3.2 ImageListItem 属性

• key: string

  • 描述: 每个子项的唯一标识符。

• img: string

  • 描述: 图像的 URL。

• title: string

  • 描述: 图像的标题。

4. Image List 组件的示例

4.1 使用不同的布局

4.1.1 瓦片布局

import React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';

function MasonryImageList() {
  const itemData = [
    {
      img: 'https://via.placeholder.com/300x200',
      title: 'Masonry Image 1',
    },
    {
      img: 'https://via.placeholder.com/200x300',
      title: 'Masonry Image 2',
    },
    {
      img: 'https://via.placeholder.com/250x250',
      title: 'Masonry Image 3',
    },
  ];

  return (
    <ImageList variant="masonry" cols={3} gap={8}>
      {itemData.map((item) => (
        <ImageListItem key={item.img}>
          <img
            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
            alt={item.title}
            loading="lazy"
          />
        </ImageListItem>
      ))}
    </ImageList>
  );
}

export default MasonryImageList;

4.2 使用标题和图像描述

import React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';
import Typography from '@mui/material/Typography';

function ImageListWithTitle() {
  const itemData = [
    {
      img: 'https://via.placeholder.com/200',
      title: 'Image 1',
      description: 'This is the first image.',
    },
    {
      img: 'https://via.placeholder.com/200',
      title: 'Image 2',
      description: 'This is the second image.',
    },
  ];

  return (
    <ImageList sx={{ width: 500, height: 450 }} cols={2} rowHeight={164}>
      {itemData.map((item) => (
        <ImageListItem key={item.img}>
          <img
            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
            alt={item.title}
            loading="lazy"
          />
          <ImageListItemBar
            title={item.title}
            subtitle={<Typography variant="body2">{item.description}</Typography>}
          />
        </ImageListItem>
      ))}
    </ImageList>
  );
}

export default ImageListWithTitle;

4.3 响应式布局

import React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import useMediaQuery from '@mui/material/useMediaQuery';

function ResponsiveImageList() {
  const itemData = [
    {
      img: 'https://via.placeholder.com/200',
      title: 'Responsive Image 1',
    },
    {
      img: 'https://via.placeholder.com/200',
      title: 'Responsive Image 2',
    },
    {
      img: 'https://via.placeholder.com/200',
      title: 'Responsive Image 3',
    },
  ];

  const isSmallScreen = useMediaQuery('(max-width:600px)');
  const cols = isSmallScreen ? 1 : 3;

  return (
    <ImageList sx={{ width: '100%', height: 'auto' }} cols={cols}>
      {itemData.map((item) => (
        <ImageListItem key={item.img}>
          <img
            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
            alt={item.title}
            loading="lazy"
          />
        </ImageListItem>
      ))}
    </ImageList>
  );
}

export default ResponsiveImageList;

5. Image List 与其他组件结合使用

5.1 Image List 与 Card 结合

将 ImageList 与 Card 组件结合使用，创建图像卡片布局：

import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import Typography from '@mui/material/Typography';

function CardImageListExample() {
  const itemData = [
    {
      img: 'https://via.placeholder.com/300',
      title: 'Card Image 1',
    },
    {
      img: 'https://via.placeholder.com/300',
      title: 'Card Image 2',
    },
  ];

  return (
    <Card>
      <CardContent>
        <Typography variant="h5">图像卡片示例</Typography>
        <ImageList cols={2}>
          {itemData.map((item) => (
            <ImageListItem key={item.img}>
              <img
                src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
                alt={item.title}
                loading="lazy"
              />
            </ImageListItem>
          ))}
        </ImageList>
      </CardContent>
    </Card>
  );
}

export default CardImageListExample;

5.2 Image List 与 Dialog 结合

使用 ImageList 在 Dialog 中展示大图：

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';

function DialogImageListExample() {
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const itemData = [
    {
      img: 'https://via.placeholder.com/300',
     title: 'Dialog Image 1',
    },
    {
      img: 'https://via.placeholder.com/300',
      title: 'Dialog Image 2',
    },
  ];

  return (
    <div>
      <Button variant="outlined" onClick={handleClickOpen}>
        打开图像对话框
      </Button>
      <Dialog onClose={handleClose} open={open}>
        <DialogTitle>图像对话框</DialogTitle>
        <ImageList cols={2}>
          {itemData.map((item) => (
            <ImageListItem key={item.img}>
              <img
                src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
                alt={item.title}
                loading="lazy"
              />
            </ImageListItem>
          ))}
        </ImageList>
      </Dialog>
    </div>
  );
}

export default DialogImageListExample;

6. 总结

Material UI 的 Layout Image List 组件提供了一种灵活而美观的方式来展示图像。通过简单的配置，可以实现多种不同的布局效果。结合其他组件，如 Card 和 Dialog，可以构建出更加丰富和交互性强的用户界面。

希望这篇博客能够帮助你更好地理解和使用 Material UI 的 Layout Image List。如果你有任何问题或需要进一步的示例，请随时提问！