Jetpack Compose onClick 波纹不以圆周运动传播？

Question

从 gif 中可以看出

当触摸包含 Text、Spacer 和LazyRowForIndexed的Column时，波纹不会以圆周运动传播。 即使触摸水平列表，它也会得到触摸效果。

@Composable
fun Chip(modifier: Modifier = Modifier, text: String) {
    Card(
        modifier = modifier,
        border = BorderStroke(color = Color.Black, width = Dp.Hairline),
        shape = RoundedCornerShape(8.dp)
    ) {
        Row(
            modifier = Modifier.padding(start = 8.dp, top = 4.dp, end = 8.dp, bottom = 4.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier.preferredSize(16.dp, 16.dp)
                    .background(color = MaterialTheme.colors.secondary)
            )
            Spacer(Modifier.preferredWidth(4.dp))
            Text(text = text)
        }
    }
}

@Composable
fun TutorialSectionCard(model: TutorialSectionModel) {

    Column(
        modifier = Modifier
            .padding(top = 8.dp)
            .clickable(onClick = { /* Ignoring onClick */ })
            .padding(16.dp)
    ) {

        Text(text = model.title, fontWeight = FontWeight.Bold, style = MaterialTheme.typography.h6)
        Spacer(Modifier.preferredHeight(8.dp))
        Providers(AmbientContentAlpha provides ContentAlpha.medium) {
            Text(model.description, style = MaterialTheme.typography.body2)
        }
        Spacer(Modifier.preferredHeight(16.dp))
        LazyRowForIndexed(items = model.tags) { _: Int, item: String ->
            Chip(text = item)
            Spacer(Modifier.preferredWidth(4.dp))
        }
    }
}

@Preview
@Composable
fun TutorialSectionCardPreview() {

    val model = TutorialSectionModel(
        clazz = MainActivity::class.java,
        title = "1-1 Column/Row Basics",
        description = "Create Rows and Columns that adds elements in vertical order",
        tags = listOf("Jetpack", "Compose", "Rows", "Columns", "Layouts", "Text", "Modifier")

    )

    Column {
        TutorialSectionCard(model)
        TutorialSectionCard(model)
        TutorialSectionCard(model)
    }
}

应该怎么做才能产生循环效果，而不是当列表本身或列表中的项目被触摸或滚动时？

Answer 1

您必须将主题应用于您的可组合，这反过来又提供了默认的波纹工厂，或者您必须明确设置波纹：

@Preview
@Composable
fun TutorialSectionCardPreview() {
    MaterialTheme() {
        Column {
            TutorialSectionCard
            ...
        }
    }
}

或者

Column(
        modifier = Modifier
            .padding(top = 8.dp)
            .clickable(
                onClick = { /* Ignoring onClick */ },
                indication = rememberRipple(bounded = true)
            )
            .padding(16.dp)
    ) {
      // content
    }

（从撰写版本 1.0.0-alpha09 开始，似乎无法防止滚动内容时显示波纹）

Answer 2

我还想出了如何只为卡片而不是包含标签的可滚动列表保留波纹。 为防止波纹仅在卡片中移动，请使用将其子项放置为堆栈的Box ，并将可点击添加到包含 header 和文本的部分。

@Composable
fun TutorialSectionCard(
    model: TutorialSectionModel,
    onClick: ((TutorialSectionModel) -> Unit)? = null
) {
    Card(
        modifier = Modifier.padding(vertical = 3.dp, horizontal = 8.dp),
        elevation = 1.dp,
        shape = RoundedCornerShape(8.dp)
    ) {
        Box(
            contentAlignment = Alignment.BottomStart
        ) {
            TutorialContentComponent(onClick, model)
            TutorialTagsComponent(model)
        }
    }
}

@Composable
private fun TutorialContentComponent(
    onClick: ((TutorialSectionModel) -> Unit)?,
    model: TutorialSectionModel
) {
    Column(Modifier
        .clickable(
            onClick = { onClick?.invoke(model) }
        )
        .padding(16.dp)
    ) {

        Text(
            text = model.title,
            fontWeight = FontWeight.Bold,
            style = MaterialTheme.typography.h6
        )

        // Vertical spacing
        Spacer(Modifier.height(8.dp))

        // Description text
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Text(model.description, style = MaterialTheme.typography.body2)
        }
        // Vertical spacing
        Spacer(Modifier.height(36.dp))
    }
}

@Composable
private fun TutorialTagsComponent(model: TutorialSectionModel) {
    Column(Modifier.padding(12.dp)) {

        // Horizontal list for tags
        LazyRow(content = {

            items(model.tags) { tag ->
                TutorialChip(text = tag)
                Spacer(Modifier.width(8.dp))
            }
        })
    }
}

Answer 3

我正在使用这种方法：

        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = rememberRipple(
                color = Color.Black
            ),
            onClick = {

            }
        )