android - 如何只允许拖动 BottomSheetScaffold 中 BottomContent 的 SheetPeek 的一部分？

Question

拖动部分可以在整个矩形上(视频中的黄色)，我希望它只允许在灰色图标上

我可以拖动黄色部分的任何部分，无论是向上还是向下，我想允许只在灰色部分拖动的行为

左边的视频和右边的视频一样，除了我把右边的sheetBackgroundColor设为透明

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun HomeScreen(modifier: Modifier = Modifier) {
BottomSheetScaffold(
    topBar = { AppBar() },
    sheetElevation = ZERO_DP,
    sheetPeekHeight = BOTTOM_ICON_CONTAINER_SIZE,
    sheetBackgroundColor = Color.Transparent,
    sheetContent = {
        BottomSheetContent(modifier)
    }
) {
    HomeContent()
}


@Composable
fun BottomSheetContent(
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier
            .fillMaxWidth()
            .fillMaxHeight(0.8f)
    ) {
        Box(
            modifier = modifier
                .padding(end = SPACING_QUADRUPLE)
                .align(Alignment.End)
                .clip(
                    RoundedCornerShape(
                        topStart = TRIPLE_CORNER_DP,
                        topEnd = TRIPLE_CORNER_DP
                    )
                )
                .size(BOTTOM_ICON_CONTAINER_SIZE)
                .background(MaterialTheme.colors.secondary)
            ,


            contentAlignment = Alignment.BottomCenter
        )
        {
            Icon(
                modifier = modifier,
                painter = painterResource(id = R.drawable.ic_qr_code),
                contentDescription = stringResource(
                    id = R.string.bottom_sheet_puller
                ),
                tint = Color.Unspecified
            )
        }

        Text(
            modifier = modifier
                .fillMaxWidth()
                .background(MaterialTheme.colors.surface)
                .padding(
                    start = SPACING_DOUBLE,
                    end = SPACING_DOUBLE,
                    bottom = SPACING_NORMAL
                ),
            text = "Scan Serial With QR",
            style = MaterialTheme.typography.h3,
        )
        Box(
            modifier = modifier
                .fillMaxSize()
                .background(color = Color.DarkGray)
        )
    }
}

错误行为:

正确的预期行为:

• 我尝试用简单的盒子替换矩形可组合项，但 Bottom Sheet 仍在考虑可组合项的整个宽度

Answer 1

必须有更好的解决方案来拦截拖动手势并将其全部留在绿色框中，但这可能就足够了。

我对你的BottomSheetContent做了一些修改，从一个Row权重的透明组件中拦截了一个拖拽手势留空，你可以试试这个，拖拽手势只被绿框接受,

@Composable
fun BottomSheetContent(
    modifier: Modifier = Modifier,
) {

    Column(
        modifier = modifier
            .fillMaxWidth()
            .fillMaxHeight(0.8f)
    ) {
        Row {

            Box(
                modifier = Modifier
                    .weight(1f)
                    .draggable(
                        orientation = Orientation.Vertical,
                        state = rememberDraggableState { 
                              Toast.makeText(context, "Non Draggable Area", Toast.LENGTH_SHORT).show()

                        }
                    ).fillMaxWidth().height(150.dp).background(Color.Transparent)) {
            }

            Box(
                modifier = modifier
                    .padding(end = 8.dp)
                    .clip(
                        RoundedCornerShape(
                            topStart = 12.dp,
                            topEnd = 12.dp
                        )
                    )
                    .size(150.dp)
                    .background(MaterialTheme.colors.secondary),
                contentAlignment = Alignment.BottomCenter
            ) {
                Icon(
                    modifier = modifier,
                    imageVector = Icons.Default.Add,
                    contentDescription = "",
                )
            }
        }


        Text(
            modifier = modifier
                .fillMaxWidth()
                .background(MaterialTheme.colors.surface)
                .padding(
                    start = 8.dp,
                    end = 8.dp,
                    bottom = 4.dp
                ),
            text = "Scan Serial With QR",
            style = MaterialTheme.typography.h3,
        )
        Box(
            modifier = modifier
                .fillMaxSize()
                .background(color = Color.DarkGray)
        )
    }
}

我无法显示我的指针单击此处，但当拖动绿色框外的左侧区域时，toast 会显示。