时间戳

首页 > 解决方案 > Jetpack Compose onClick 波纹不以圆周运动传播？

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

问题描述

从 gif 中可以看出

在此处输入图像描述

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

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

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

标签： androidandroid-jetpack-compose

解决方案

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

@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 开始，似乎无法防止滚动内容时显示波纹）

推荐阅读