如何基于屏幕尺寸动态调整MUI中ImageList组件的列数？

你可以通过MUI内置的断点检测能力动态给ImageList的cols属性传值实现响应式列数调整，这是目前最优的实现方案：

核心逻辑 #

ImageList本身没有内置断点属性，但它的cols参数支持传入动态数值，我们只需要监听当前屏幕尺寸匹配的断点，返回对应列数即可，完全复用MUI自身的断点体系，不需要额外引入第三方依赖。

具体实现步骤 #

• 从MUI包中引入useTheme、useMediaQuery两个内置钩子
• 在组件内获取当前主题配置，使用useMediaQuery监听各断点的匹配状态
• 封装列数计算逻辑，将返回值直接传给ImageList的cols属性

代码示例 #

import { useTheme, useMediaQuery, ImageList, ImageListItem, ImageListItemBar } from '@mui/material';

const ResponsiveImageGrid = ({ imageListData }) => {
  const theme = useTheme();
  // 可根据业务需求调整各断点对应的列数
  const matchXl = useMediaQuery(theme.breakpoints.up('xl'));
  const matchLg = useMediaQuery(theme.breakpoints.up('lg'));
  const matchMd = useMediaQuery(theme.breakpoints.up('md'));
  const matchSm = useMediaQuery(theme.breakpoints.up('sm'));

  const getColumnCount = () => {
    if (matchXl) return 5;
    if (matchLg) return 4;
    if (matchMd) return 3;
    if (matchSm) return 2;
    return 1; // 超小屏默认展示1列
  };

  return (
    <ImageList cols={getColumnCount()} gap={16}>
      {imageListData.map((item) => (
        <ImageListItem key={item.id}>
          <img src={item.imgUrl} alt={item.title} loading="lazy" />
          <ImageListItemBar title={item.title} subtitle={item.subtitle} />
        </ImageListItem>
      ))}
    </ImageList>
  );
};

export default ResponsiveImageGrid;

方案优势 #

• 完全对齐项目中其他组件的断点规则，如果你自定义过主题断点，也会自动适配不需要额外修改
• 性能损耗极低，只有断点切换时才会重新计算列数，没有多余的重渲染
• 不需要修改ImageList的默认样式，不会破坏组件本身的布局逻辑

内容的提问来源于stack exchange，提问作者Stormwaker