android Jetpack点击涟漪不以圆周运动传播？

egmofgnx 于 2023-03-11 发布在 Android

关注(0)|答案(4)|浏览(118)

如gif中所示

当触摸包含文本、空格和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)
    }
}

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

android

来源：https://stackoverflow.com/questions/65382491/jetpack-compose-onclick-ripple-is-not-propagating-with-a-circular-motion

4条答案

按热度按时间

d8tt03nd1#

您必须将主题应用于可组合对象，这反过来又提供了默认的涟漪工厂，或者您必须显式地设置涟漪：

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

(As的compose版本1.0.0-alpha 09，似乎没有办法防止涟漪显示时，内容滚动）

赞(0）回复(0）举报 2023-03-11

0kjbasz62#

我用的是这种方法：

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

            }
        )

赞(0）回复(0）举报 2023-03-11

whitzsjs3#

我还想出了如何只为卡片而不是包含标签的可滚动列表保留涟漪。为了防止ripple只在卡片间移动，使用Box，它将它的子元素作为一个堆栈，并将clickable添加到包含标题和文本的部分。

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

赞(0）回复(0）举报 2023-03-11

wvt8vs2t4#

与@jns相同，只是多加了一行

modifier = modifier
    .clickable (
        interactionSource = remember { MutableInteractionSource() }, // without this indication parameter gets an error
        indication = rememberRipple(
            bounded = true
        ),
        onClick = { 
           //on click
        }
    )

赞(0）回复(0）举报 2023-03-11

我来回答

android Jetpack点击涟漪不以圆周运动传播？

4条答案

相关问题

热门标签

最新问答