如何在 MUI GridList 中实现瓦片的水平滚动？答案

【问题标题】：How to implement horizontal scrolling of tiles in MUI GridList?如何在 MUI GridList 中实现瓦片的水平滚动？
【发布时间】：2021-12-04 10:36:07
【问题描述】：

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

【问题讨论】：

标签： reactjs material-ui scrollbar horizontal-scrolling

【解决方案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)'：与上面相同，但对于视口之外的列。

现场演示

参考文献

【讨论】：