拖拽部分是可能的整个矩形(黄色的视频),我希望它只允许在灰色图标上

我可以拖动黄色部分的任何部分,无论是向上还是向下,我希望只允许在灰色部分上拖动

左侧视频与右侧视频相同,不同之处在于我将右侧的工作表背景 colored颜色 设置为透明

@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)
        )
    }
}

Wrong Behavior: Wrong Behavior

Correct Intended Behavior: Intended Behavior

  • 我try 用简单的长方体替换矩形可组合对象,但底部的工作表仍然考虑可组合对象的整个宽度

推荐答案

必须有更好的解决方案来拦截拖拽手势,并将其全部保留在绿色框内,但这可能就足够了.

我对您的BottomSheetContent做了一些更改,截取了一个权重为Row的透明组件的拖动手势,并将其保留为空,您可以try 这个,并且拖动手势只被绿色框接受,

@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)
        )
    }
}

我不能在这里显示我的指针点击,但当拖动绿色框外的左侧区域时, cogo toast 会显示出来.

enter image description here

Android相关问答推荐

Android配置设置. gradle不同应用风格

Android可组合继承?

如何使用Jetpack Compose实现此底表?

BroadCastReceiver的onReceive方法中的Intent上的Extras为空

Jetpack Compose-如何在进入新产品线之前删除单词?

如何在同一行中滚动自定义布局和惰性列,就好像它们是一个组件一样

Camera2 将图像从 ImageReader 传递到 MediaRecorder

需要在按钮 onclick 上从 string.xml 获取值. @Composable 调用只能在@Composable 函数的上下文中发生

运行设备选项卡在 Android Studio 中自动打开

如何将一个 Composable 作为其参数传递给另一个 Composable 并在 Jetpack Compose 中显示/运行它

如何在 Jetpack Compose 中添加多个标签

ionic - capacitor - Android 风味 - 无法在模拟器或真实设备中运行应用程序

错误:构建 react-native 应用程序时包 com.facebook.react.bridge 不存在

如何在 Dolphin 中启用 android studio new logcat | 2021.3.1 金丝雀 6?

Kotlin 调用带参数的函数 Any is xxx ||任何 yyy 都不起作用

android 13 版本是否会影响 android 12 目标应用程序

新安装 Expo Go 的 android 设备上的 sdk 46.0.0 (@snack/sdk.46.0.0) 出错

Android Studio:如何添加应用程序质量洞察窗口以查看 Android Studio 中的 Crashlytics 数据?

如何在 Jetpack Compose 中禁用 TabRow 或 Tab 中的涟漪效应?

如何在 Kotlin 的片段中制作图像列表?