Row 上的可点击修饰符未接收事件

Question

我有以下页面，我试图在该页面上显示已保存卡片的列表，并且可以添加新卡片。该列中的最后一项是可扩展的，因此当单击时，用户可以看到用于填写卡信息以添加新卡的表单。这昨天工作得很好，但我不明白为什么今天不工作。实际的 CardItem 元素可以很好地接收点击，但自定义可扩展元素没有，ShadowWrapper 父元素和 RaisedCard 元素也没有。

卡片屏幕：

private data class CreditCard(val type: CreditCardTypes, val lastDigits: String)
 
@Composable
fun CardSelectionScreen(onCardSelected: () -> Unit) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .padding(vertical = 24.dp, horizontal = 16.dp)
            .verticalScroll(rememberScrollState())
    ) {
        var selectedCardIndex by remember { mutableStateOf(0) }
        val cardList = listOf(
            CreditCard(CreditCardTypes.MASTERCARD, "3429"),
            CreditCard(CreditCardTypes.VISA, "3429"),
            CreditCard(CreditCardTypes.MASTERCARD, "3429")
        )
        TopBarPadding(true)
        Spacer(modifier = Modifier.height(10.dp))
        RaisedCard() {
            Column(
                modifier = Modifier.padding(vertical = 20.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp),
            ) {
                Text(
                    text = stringResource(id = R.string.please_select_a_card),
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold,
                    textAlign = TextAlign.Start
                )
                Spacer(modifier = Modifier.height(9.dp))
                for (i in cardList.indices) {
                    CreditCardItem(cardList[i],
                        isSelected = selectedCardIndex == i, onItemSelected = { ->
                            selectedCardIndex = i
                        })
                }
                ShadowWrapper( // This is the item's layout
                    cardElevation = 1.dp,
                    shadowElevation = 3.dp
                ) {
                    Column(
                        modifier = Modifier
                            .animateContentSize()
                    ) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .clip(RoundedCornerShape(6.dp))
                                .background(
                                    if (selectedCardIndex == cardList.size) colorResource(
                                        id = R.color.bottom_modal_drawer_background
                                    ) else Color.White
                                )
                                .padding(horizontal = 16.dp, vertical = 16.dp)
                                .clickable(
                                    indication = null,
                                    interactionSource = MutableInteractionSource()
                                ) { // this does not register at all, tried with Log.d
                                    selectedCardIndex = cardList.size
                                },
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            Image(
                                painter = painterResource(id = R.drawable.ic_add_credit_card),
                                contentDescription = "Add credit card icon"
                            )
                            Spacer(modifier = Modifier.width(13.dp))
                            Text(
                                stringResource(id = R.string.new_card_addition),
                                textAlign = TextAlign.Start,
                                fontSize = 16.sp,
                                fontWeight = FontWeight.Normal,
                                color = colorResource(id = R.color.Orange_100)
                            )
                        }
                        if (selectedCardIndex == cardList.size) {
                            Column(
                                modifier = Modifier.padding(
                                    horizontal = 16.dp
                                )
                            ) {
                                Spacer(modifier = Modifier.padding(22.fixedDp()))
                                Text(
                                    text = LocalContext.current.getString(R.string.add_credit_card_top_msg),
                                    fontSize = 16.sp,
                                    fontWeight = FontWeight.Bold,
                                    color = colorResource(id = R.color.Black_100)
                                )
                                Spacer(modifier = Modifier.padding(10.dp))
                                InputField(label = LocalContext.current.getString(R.string.owner_name))
                                Spacer(modifier = Modifier.padding(18.fixedDp()))
                                InputField(label = LocalContext.current.getString(R.string.credit_card_number))
                                Spacer(modifier = Modifier.padding(18.fixedDp()))
                                Row() {
                                    Box(
                                        modifier = Modifier
                                            .weight(1.5f)
                                    ) {
                                        InputField(label = LocalContext.current.getString(R.string.expiration_date))
                                    }
                                    Spacer(modifier = Modifier.padding(6.fixedDp()))
                                    Box(
                                        modifier = Modifier
                                            .weight(1f)
                                    ) {
                                        InputField(
                                            label = LocalContext.current.getString(R.string.cvv),
                                            isPassword = true,
                                            placeholder = ""
                                        )
                                    }
                                }
                                Spacer(modifier = Modifier.height(34.fixedDp()))
                                Row() {
                                    MyCheckbox(
                                        modifier = Modifier.padding(top = 3.dp),
                                        isCheckedInitially = true
                                    )
                                    Spacer(modifier = Modifier.width(13.dp))
                                    Text(
                                        stringResource(id = R.string.save_card_for_future_transactions),
                                        fontSize = 14.sp,
                                        fontWeight = FontWeight.Normal,
                                        color = colorResource(id = R.color.Black_100)
                                    )
                                }
                                Spacer(modifier = Modifier.padding(22.fixedDp()))
                            }
                        }
                    }
                }
                Spacer(modifier = Modifier.height(2.dp))
            }
        }
        Spacer(modifier = Modifier.height(32.dp))
        MyButton(
            text = stringResource(id = R.string.continue_text),
            MyButtonType.PRIMARY,
            onClick = { onCardSelected() }
        )
        Spacer(modifier = Modifier.height(20.dp))
        AcceptedCardsFooter()
        BottomBarPadding(true)
    }
}
 
@Composable
private fun CreditCardItem(
    cardDetails: CreditCard,
    isSelected: Boolean,
    onItemSelected: () -> Unit
) {
    ShadowWrapper(cardElevation = 1.dp, shadowElevation = 3.dp) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(6.dp))
                .background(if (isSelected) colorResource(id = R.color.bottom_modal_drawer_background) else Color.White)
                .padding(horizontal = 16.dp, vertical = 15.dp)
                .clickable(indication = null, interactionSource = MutableInteractionSource()) {
                    onItemSelected()
                },
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                MyRadioButton(label = "", selected = isSelected)
                Spacer(modifier = Modifier.width(16.dp))
                Box(
                    modifier = Modifier
                        .width(43.dp)
                        .height(33.dp)
                        .clip(RoundedCornerShape(4.dp))
                        .background(colorResource(id = R.color.Grey_10))
                        .padding(horizontal = 6.dp, vertical = 7.dp)
                ) {
                    Image(
                        painter = painterResource(id = cardDetails.type.icon),
                        contentDescription = "",
                        modifier = Modifier.align(Alignment.Center)
                    )
                }
                Spacer(modifier = Modifier.padding(8.fixedDp()))
                Text(
                    text = "${cardDetails.type.prefix}****${cardDetails.lastDigits}",
                    fontSize = 16.sp,
                    color = colorResource(id = R.color.Black_100)
                )
            }
        }
    }
}

RaisedCard.kt:

@Composable
fun RaisedCard(
    modifier: Modifier = Modifier,
    mainBody: @Composable () -> Unit
) {
    Card(
        shape = RoundedCornerShape(13.dp),
        elevation = 10.dp,
        modifier = modifier
            .fillMaxWidth()
            .wrapContentHeight()
    ) {
        Column(
            modifier = Modifier
                .background(Color.White)
                .padding(horizontal = 16.dp)
        ) {
            mainBody()
        }
    }
}

ShadowWrapper.kt:

@Composable
fun ShadowWrapper(
    modifier: Modifier = Modifier,
    border: BorderStroke = BorderStroke(0.dp, Color.Transparent),
    cardElevation: Dp = 2.dp,
    shadowElevation: Dp = 1.dp,
    shadowShapeRadius: Dp = 6.dp,
    content: @Composable () -> Unit,
) {
    Card(
        elevation = cardElevation,
        border = border,
        shape = RoundedCornerShape(shadowShapeRadius),
        modifier = modifier.shadow(shadowElevation, RoundedCornerShape(shadowShapeRadius)).wrapContentHeight()
    ) {
        content()
    }
}

Answer 1

我无法重现您的问题，可能是因为您应用程序的其他部分触发了额外的重组。然而，最有可能的原因是您忘记 remember 您的 MutableInteractionSources.

像这样：

otherModifiers.clickable(
    indication = null,
    interactionSource = remember { MutableInteractionSource() }
) { // this does not register at all, tried with Log.d
    selectedCardIndex = cardList.size
}

如果您不将 MutableInteractionSource 包装在 remember 中，则每次重组时都会创建一个新实例，因此之前的触摸事件状态会丢失

Row 上的可点击修饰符未接收事件

Clickable modifier on Row not receiving events

android

kotlin

android-jetpack-compose