Jetpack Compose 列仅可在元素区域中单击

Question

当下面的代码运行时，它会覆盖下面的屏幕元素。为了防止意外点击下面的元素，我向该列添加了“可点击”属性，该属性应该捕获点击。但是，如图所示，并非整个列区域都可单击，并且可能会意外单击下面的项目。有什么办法可以让整个栏目区域都可点击吗？当然，如果通知可见，我可以锁定下面的元素，但也许有一个简单的解决方案，例如整个列区域可单击？

@Composable
fun ShowAddedUserData(
    userName: String,
    userType: String,
    userPass: String,
    onClear: () -> Unit
) {

    val name = stringResource(id = R.string.user_name) + " : " + userName
    val type = stringResource(id = R.string.user_type) + " : " + userType
    val pass = stringResource(id = R.string.password) + " : " + userPass
    val userInfoToCopy = "$name\n$type\n$pass"
    val clipboardManager = LocalClipboardManager.current
    val localContext = LocalContext.current
    val copyDataInfo = stringResource(id = R.string.data_copied_to_clipboard)

    Spacer(modifier = Modifier.height(20.dp))
    Column(
        modifier = Modifier.clickable {  },
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            modifier = Modifier.padding(horizontal = 20.dp),
            text = stringResource(id = R.string.user_created)
        )
    }

    Spacer(modifier = Modifier.height(20.dp))
    Column(
        modifier = Modifier
            .clip(shape = RoundedCornerShape(20.dp))
            .background(color = Color.LightGray),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Spacer(modifier = Modifier.height(10.dp))
        Text(modifier = Modifier.padding(horizontal = 20.dp), text = name)
        Text(modifier = Modifier.padding(horizontal = 20.dp), text = type)
        Text(modifier = Modifier.padding(horizontal = 20.dp), text = pass)
        Spacer(modifier = Modifier.height(20.dp))
        Image(
            painter = painterResource(id = R.drawable.ic_copy_content_blue),
            contentDescription = "copy content",
            Modifier.clickable {
                clipboardManager.setText(AnnotatedString(userInfoToCopy))
                Toast.makeText(localContext, copyDataInfo, Toast.LENGTH_SHORT).show()
            })
        Text(
            modifier = Modifier.padding(horizontal = 5.dp),
            text = stringResource(id = R.string.copy_to_memory),
            fontSize = 12.sp
        )
        Spacer(modifier = Modifier.height(30.dp))
        Button(onClick = onClear) {
            Text(text = stringResource(id = R.string.clear))
        }
        Spacer(modifier = Modifier.height(10.dp))
    }
}

Answer 1

查看

AlertDialog

和

Dialog

，它们提供了一种简单的方法来覆盖您的用例。

AlertDialog(
    icon = {},
    title = {},
    text = {
        // This actually is for Text, but you can pass any Composable here
        ShowAddedUserData(/** ... **/)
    },
    onDismissRequest = {},
    confirmButton = {},
    dismissButton = {}
)

或

Dialog(onDismissRequest = { }) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(16.dp),
        shape = RoundedCornerShape(16.dp),
    ) {
        ShowAddedUserData(/** ... **/)
    }
}

或者，您可以将

ShowAddedUserData

可组合项包装到

Surface

中。默认情况下，

Surface

消耗其显示区域中的所有交互。