Material UI v5中水平网格滚动的示例

Question

在之前的 material-ui 版本 v4.11.1 中，他们有一个 Grid List 组件，在当前版本中被 Image list 替换了。但是在 Grid List 中，有一个 Single line Grid list 的示例。

https://material-ui.com/components/grid-list/#single-line-grid-list

但在当前版本的 Material UI v5.0.0-alpha.37 中

https://next.material-ui.com/components/image-list/

对于网格或图像列表组件，没有提供水平滚动的示例。 并尝试添加来自先前版本的修改。

flexWrap: "nowrap",
overflowX: "scroll",

但它不起作用，如果有人能分享一个简单的例子，我将不胜感激。

- xaiborweb

Answer 1

所以我遇到了类似的问题，并成功解决了Material UI 5版本的问题。在您的ImageList组件中，您需要在sx内定义overflow为auto。此外，您希望图像出现在屏幕上的高度是由rowHeight定义的，所以我将rowHeight设置为200。最后，在您的ImageListItem中，您需要在sx内设置一个display为flex和flexDirection为行，这样可以使每个项目水平放置。为了在每个图像之间添加间距，在img标签内定义marginRight为1em或您喜欢的任何数字 - 记住这是在style属性内完成的。

以下是我的代码示例，用于创建ImageList的水平滚动：

<ImageList sx={{ overflowX: 'auto' }} rowHeight={200}>
          <ImageListItem sx={{display: 'flex', flexDirection: 'row'}}>
            {state.posts[i].images.map(image => {
              return (
              <img
              src={image}
              srcSet={image}
              alt='title'
              loading='lazy'
              style={{paddingRight: '1em'}}
              />
              )
            })}
          </ImageListItem>
        </ImageList>

以下是两张图片的样子：

- SupraCoder

---

尝试这个：https://dev59.com/uMLra4cB1Zd3GeqPJnJz - E.A.T