材质 UI - 可滑动抽屉 - 允许抽屉出血交互

Question

我正在使用 Material UI 中的

SwipeableDrawer

尝试创建一个可滑动的底部工作表。 当抽屉关闭时，抽屉出血设置为85px，以创建抽屉永远无法关闭的效果。 当抽屉“关闭”或最小化时，用户可以看到输入并尝试进行输入，以便用户可以与组件交互。 问题是，可滑动区域覆盖了组件以捕获和拖动操作。 有什么方法可以让抽屉出血组件允许用户交互并仍然保留拖动事件，以便用户可以将抽屉拖动打开？

抽屉代码：

const drawerBleeding = 85;

<SwipeableDrawer
    container={portal}
    className={classNames.join(' ')}
    anchor="bottom"
    id={id}
    open={isOpen}
    onClose={onClose ?? (() => void (0))}
    onOpen={onOpen}
    SwipeAreaProps={{ onClick: () => {}, style: {zIndex: 1100}, id: `${id}-swipe-area` }}
    swipeAreaWidth={drawerBleeding}
    disableSwipeToOpen={false}
    onTransitionEnd={onTransitionEnd}
    ModalProps={{ keepMounted: true }}>
    <StyledBox onClick={onOpen} sx={{
        position: 'absolute',
        top: -bleeding,
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8,
        visibility: 'visible',
        boxShadow: "0px -8px 8px -8px rgba(0, 0, 0, 0.35)",
        height: `${drawerBleeding}px`,
        right: 0,
        left: 0,
        pointerEvents: "auto"
    }}>
        <Puller />
        {headerComponent}
    </StyledBox>
    <div style={{ height: '100%', borderRadius: "inherit" }}>{children}</div>
</SwipeableDrawer>

这是抽屉的图片：

输入框、汉堡包和头像的顶部都有透明的可滑动区域，用户无法与它们交互。

我尝试查看如果更改抽屉出血组件的 z 索引，拖动事件是否会传播到拖动区域，但这似乎不起作用。

下面是页面上呈现抽屉和滑动区域的位置：

如果我将可滑动区域放在出血组件后面，我就会失去滑动功能。

Answer 1

由于 [电子邮件受保护] 现在

allowSwipeInChildren

组件上有一个

SwipeableDrawer

字段，只需将其设置为

true

，它就会像您期望的那样工作。还可以传递函数。您可以在这里查看有关它的文档：https://mui.com/material-ui/api/swipeable-drawer/

我希望有帮助:)

Answer 2

如果您无法使用

allowSwipeInChildren

属性，您可以通过利用

children

中的

SwipeAreaProps

来实现类似的功能。这使您可以完全控制滑动区域每个部分内的交互处理。例如，下面的代码定义了两个单独的内联元素来捕获

onClick

事件，允许您单独管理每个元素的逻辑。这种方法根据

address

状态创建具有不同行为的单独交互区域。:

SwipeAreaProps={{
  sx: {
    width: !isOpen && address ? `calc(100% - 52px)` : '100%',
    height: !isOpen && address ? '100px' : '40px !important',
    bottom: !isOpen && address ? '0' : '72px'
  },
  children: (
    <>
      {address && (
        <span
          style={{
            display: 'block',
            width: '52px',
            height: '52px',
            marginRight: '-52px',
            backgroundColor: 'transparent',
            position: 'absolute',
            top: 0,
            right: 0
          }}
          onClick={(event) => {
            event.stopPropagation();
            event.preventDefault();
            setAddress(null);
          }}
        />
      )}
      {!address && (
        <span
          style={{
            display: 'block',
            width: 'calc(100% + 52px)',
            height: '72px',
            marginBottom: '-72px',
            backgroundColor: 'transparent',
            position: 'absolute',
            bottom: 0
          }}
          onClick={(event) => {
            event.stopPropagation();
            event.preventDefault();
            toggle('show');
            setActionSheetState(ActionSheetStates.SEARCH);
          }}
        />
      )}
    </>
  )
}}