英文:
How to apply ripple effect only to Buttons background, but not not content?
问题
在XML中，涟漪效果仅应用于材质按钮的背景，而在Compose中，它覆盖整个按钮，还部分覆盖文本，当按下按钮时。
我想要匹配XML中的涟漪实现，以便它不会在按钮文本上应用视觉效果，仅应用于背景。
感谢任何帮助。
以下是按下Compose按钮时的截图，涟漪（黄色）覆盖文本。
以下是XML版本，其中黄色涟漪仅应用于按钮的背景。
英文:
In XML the ripple effect is applied only to the background of a material button, whereas on Compose, it covers the entire button, also partially covering the text, when button is pressed.
I want to match ripple implementation as it is on XML, so that it does not apply a visual effect on the Buttons text, only background.
Any help is appreciated.
Below is a screenshot of a pressed Compose Button, when ripple (yellow) is covering the text.
Here is the XML version, where yellow ripple is applied only to the background of a Button.
答案1
得分: 1
目前，按我所知，使用按钮（Button）无法实现此功能。我建议尝试用一个框（Box）+文本（Text）来替代按钮，类似于以下方式：
@Composable
fun RippleButton() {
Box(
modifier = Modifier
...
.clickable(
interactionSource = MutableInteractionSource(),
indication = rememberRipple(color = Color.DarkGray),
onClick = { /* 在这里添加你的代码 */ }),
contentAlignment = Alignment.Center
) {
Text(...)
}
}
请注意，这只是一个示例，你需要根据你的需求自行调整代码和文本内容。
英文:
Currently, this isn't possible by using the Button AFAIK. I would try to replace the button with a Box + a Text. Something like this:
@Composable
fun RippleButton() {
Box(
modifier = Modifier
...
.clickable(
interactionSource = MutableInteractionSource(),
indication = rememberRipple(color = Color.DarkGray),
onClick = { /* your code here */ }),
contentAlignment = Alignment.Center
) {
Text(...)
}
}
答案2
得分: 1
我也遇到了相同的问题，并发现我必须使用这个解决方法，尽管它看起来不太好，因为它会两次呈现相同的文本。
@Composable
fun RippleButton() {
Box(contentAlignment = Alignment.Center) {
Box(
modifier = Modifier
...
.clickable( /* ... */ ),
contentAlignment = Alignment.Center
) {
Text( /* 参数与下面的文本相同 */ )
}
Text( /* 参数与上面的文本相同 */ )
}
}
英文:
I also encountered the same issue and found that I had to use this workaround instead, even though it looks bad because it renders the same text twice.
@Composable
fun RippleButton() {
Box(contentAlignment = Alignment.Center) {
Box(
modifier = Modifier
...
.clickable( /* ... */ ),
contentAlignment = Alignment.Center
) {
Text( /* Parameter is the same as the text below */ )
}
Text( /* Parameter is the same as the text above */ )
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论