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

How to implement horizontal scrolling of tiles in MUI GridList?

这是我的 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>
    </>
  );
}

注意：在较新版本的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'：如果没有 space，则告诉网格创建另一列而不是转到下一行。
  • gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))'：设置列最小和最大宽度，最小为160px，如果足够多space（不需要水平滚动条），设置每列宽度同样。
  • gridAutoColumns: 'minmax(160px, 1fr)'：与上面相同，但对于视口之外的列。

现场演示

V5

V4

参考资料