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

Question

在先前版本的material-ui v4.11.1中，他们有一个网格列表组件，在当前版本中被图像列表取代。但在 Gid 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",

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

Answer 1

所以我遇到了类似的问题，并能够在 Material UI 版本 5 中解决这个问题。在您的ImageList组件中，您想要在 内定义sx一个overflowof auto。此外，您希望图像在屏幕上显示的高度将由 定义rowHeight，因此我rowHeight自己将其设置为 200。最后，在您的 中ImageListItem，您希望将其设置sx为显示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>

下面是它的两张图片：