如何在MUI GridList中实现图块的水平滚动？

Question

这是我的 JS 页面，我需要实现GridList组件来显示多个图块，并且在列表大小超出屏幕限制后可以水平滚动。

import React,{ useState} from "react";
import Header from "../../common/header/Header";
import "./Home.css";
import { GridList, GridListTile, GridListTileBar} from "@material-ui/core";

const images = [
    { thumbnail: { uri: 'https://lorempixel.com/200/200/animals',name:'animals'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/city'  ,name:'city'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/city'  ,name:'city'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/city'  ,name:'city'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/nature'  ,name:'nature'} },
    { thumbnail: { uri: 'https://lorempixel.com/200/200/cats'  ,name:'cats'} },
    { thumbnail: { uri: 'https://lorempixel.com/200/200/cats'  ,name:'cats'} },
    { thumbnail: { uri: 'https://lorempixel.com/200/200/cats'  ,name:'cats'} },
  ];

export default function Home() {
  return (
    <>
      <Header></Header>
      <header className="head">Upcoming Movies</header>
        <GridList cellHeight={180} cols={6}>
            {images.map((image) => (
            <GridListTile>
                <img src={image.thumbnail.uri} />
                <GridListTileBar
                    title={ image.thumbnail.name}
                />
            </GridListTile>
            ))}
        </GridList>
    </>
  );
}

Answer 1

注意：在较新版本的 MUI 中，GridList已更改为ImageList，下面的代码使用最新的 API。

您可以使用以下代码填充列而不是行：

<ImageList
  sx={{
    gridAutoFlow: "column",
    gridTemplateColumns: "repeat(auto-fill,minmax(160px,1fr)) !important",
    gridAutoColumns: "minmax(160px, 1fr)"
  }}
>
  {images.map((image) => (
    <ImageListItem>
      <img src={image.thumbnail.uri} />
      <ImageListItemBar title={image.thumbnail.name} />
    </ImageListItem>
  ))}
</ImageList>

• gridAutoFlow: 'column'：如果没有剩余空间，则告诉网格创建另一列，而不是转到下一行。
• gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))'：设置列的最小和最大宽度，最小为160px，如果有足够的空间（不需要水平滚动条），则将每列宽度设置为相等。
• gridAutoColumns: 'minmax(160px, 1fr)'：与上面相同，但对于视口之外的列。

现场演示

V5

V4

参考

• https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
• https://css-tricks.com/snippets/css/complete-guide-grid/