Compose Button移除水波纹效果

FrancisBingo

墨衍会员 · AI 创作全网分发码龄10年

关注

原创 2024-06-21 18:19:08 1.1k 阅读 AI 写同款· GEO 优化 ›

一、背景

在使用Compose实现Button按钮时，设计要求移除按钮的水波纹效果，只保留按压效果，经查Compose1.4.3版本中，并没有直接移除水波纹的能力

二、遇到问题

经过多次尝试，使用Compose的Button组件始终无法实现目标效果，使用Box+Text 最终绘制的效果Text显示的颜色和字间距又和Button效果渲染的不一致，

三、效果演示

这里就不演示了。代码在下面，你试试就知道效果了

三、实现方案

经过多次失败后，看了一下Compose的Button组件源码，找到问题所在。最终得出以下效果实现代码

fun ButtonBlackOutline(modifier: Modifier = Modifier, content: String = "", onClick: () -> Unit) {
    var isPressed by remember { mutableStateOf(false) }
    var buttonRect by remember { mutableStateOf(Size(0f, 0f)) }

    Box(
        modifier = modifier
            .background(
                color = if (isPressed) {
                    colorResource(
                        id = CommonColor.common_pressed_btn_color
                    )
                } else {
                    colorResource(id = CommonColor.color_transparent)
                },
                shape = RoundedCornerShape(100.dp)
            )
            .fillMaxWidth()
            .height(40.dp)
            .border(0.5.dp, colorResource(id = CommonColor.text_600), RoundedCornerShape(100.dp))
            .pointerInteropFilter { event ->
                when (event.action) {
                    MotionEvent.ACTION_DOWN -> {
                        isPressed = true
                        true
                    }

                    MotionEvent.ACTION_UP -> {
                        if (isPressed) {
                            onClick()
                        }
                        isPressed = false
                        true
                    }

                    MotionEvent.ACTION_CANCEL -> {
                        isPressed = false
                        true
                    }

                    MotionEvent.ACTION_MOVE -> {
                        val isInside = event.x in 0f..buttonRect.width && event.y in 0f..buttonRect.height
                        isPressed = isInside
                        true
                    }

                    else -> false
                }
            }
            .onGloballyPositioned { coordinates ->
                buttonRect = coordinates.size.toSize()
            },
        contentAlignment = Alignment.Center,
        content = {
            // 实现和Button效果一致的重要代码
            CompositionLocalProvider(
                LocalContentAlpha provides ButtonDefaults.buttonColors().contentColor(enabled = true).value.alpha
            ) {
                ProvideTextStyle(
                    value = MaterialTheme.typography.button
                ) {
                    Text(
                        text = content,
                        color = colorResource(id = CommonColor.text_900),
                        fontSize = 14.sp
                    )
                }
            }
        }
    )
}