带圆角的波纹 Jetpack Compose
Ripple with rounded corners Jetpack Compose
在 的回答中我弄错了波纹动画。您知道如何使用 Jetpack Compose 创建带圆角的波纹吗?
默认波纹我有这个:
代码:
Card(shape = RoundedCornerShape(30.dp),
border = BorderStroke(width = 2.dp, color = buttonColor(LocalContext.current)),
backgroundColor = backColor(LocalContext.current),
modifier = Modifier
.fillMaxWidth()
.padding(10.dp)
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(radius = 30.dp)
) { show = !show }
) { ... } //Show is animation of other element.
//如果我把波纹半径设置为200dp(这是卡片的高度)波纹效果不正常。
从 1.0.0-beta08
开始,您可以使用 Card
中的 onClick
参数而不是 clickable
来解决此问题修饰符:
Card(shape = RoundedCornerShape(30.dp),
modifier = Modifier
.fillMaxWidth()
.padding(10.dp),
onClick = { show = !show }
)
直到 1.0.0-beta07
对 Card
应用 .clickable
修改器,涟漪才不会被布局边界剪裁。
作为解决方法,您可以将 .clickable
修饰符应用于卡片的内容(例如 Box
):
Card(
shape = RoundedCornerShape(30.dp),
border = BorderStroke(width = 2.dp, color = Color.Blue),
backgroundColor = Color.White,
modifier = Modifier
.fillMaxWidth()
.padding(10.dp)
) {
Box(Modifier
.clickable(
onClick = { /* ...*/ }
)
){
Text("Text")
}
}
到目前为止我已经确定了 2 个选项:
- 除了设置形状外,使用
.clip
修饰符剪裁使用相同形状的卡片:
Card(
shape = RoundedCornerShape(30.dp),
modifier = Modifier
.clip(RoundedCornerShape(30.dp))
.clickable {
//do something
}
) {
Box {
Text("Text")
}
}
这种方法的缺点是高程阴影也会被剪裁,因此您的 Card 会失去它的阴影。
- 在卡片内容可组合项上设置
.clickable
:
Card(
shape = RoundedCornerShape(30.dp)
) {
Box(
modifier = Modifier.clickable {
//do something
}
) {
Text("Text")
}
}
当您使用长按或其他手势时,您可以使用modifier.indication
val interactionSource = remember { MutableInteractionSource() }
Card(
modifier = Modifier
.padding(12.dp, 6.dp)
.fillMaxWidth()
.clip(RoundedCornerShape(12.dp))
.indication(interactionSource, LocalIndication.current)
.pointerInput(Unit) {
detectTapGestures(
onPress = { offset ->
val press = PressInteraction.Press(offset)
interactionSource.emit(press)
tryAwaitRelease()
interactionSource.emit(PressInteraction.Release(press))
},
onLongPress = {},
onTap = {}
)
}
)
在
默认波纹我有这个:
代码:
Card(shape = RoundedCornerShape(30.dp),
border = BorderStroke(width = 2.dp, color = buttonColor(LocalContext.current)),
backgroundColor = backColor(LocalContext.current),
modifier = Modifier
.fillMaxWidth()
.padding(10.dp)
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(radius = 30.dp)
) { show = !show }
) { ... } //Show is animation of other element.
//如果我把波纹半径设置为200dp(这是卡片的高度)波纹效果不正常。
从 1.0.0-beta08
开始,您可以使用 Card
中的 onClick
参数而不是 clickable
来解决此问题修饰符:
Card(shape = RoundedCornerShape(30.dp),
modifier = Modifier
.fillMaxWidth()
.padding(10.dp),
onClick = { show = !show }
)
直到 1.0.0-beta07
对 Card
应用 .clickable
修改器,涟漪才不会被布局边界剪裁。
作为解决方法,您可以将 .clickable
修饰符应用于卡片的内容(例如 Box
):
Card(
shape = RoundedCornerShape(30.dp),
border = BorderStroke(width = 2.dp, color = Color.Blue),
backgroundColor = Color.White,
modifier = Modifier
.fillMaxWidth()
.padding(10.dp)
) {
Box(Modifier
.clickable(
onClick = { /* ...*/ }
)
){
Text("Text")
}
}
到目前为止我已经确定了 2 个选项:
- 除了设置形状外,使用
.clip
修饰符剪裁使用相同形状的卡片:
Card(
shape = RoundedCornerShape(30.dp),
modifier = Modifier
.clip(RoundedCornerShape(30.dp))
.clickable {
//do something
}
) {
Box {
Text("Text")
}
}
这种方法的缺点是高程阴影也会被剪裁,因此您的 Card 会失去它的阴影。
- 在卡片内容可组合项上设置
.clickable
:
Card(
shape = RoundedCornerShape(30.dp)
) {
Box(
modifier = Modifier.clickable {
//do something
}
) {
Text("Text")
}
}
当您使用长按或其他手势时,您可以使用modifier.indication
val interactionSource = remember { MutableInteractionSource() }
Card(
modifier = Modifier
.padding(12.dp, 6.dp)
.fillMaxWidth()
.clip(RoundedCornerShape(12.dp))
.indication(interactionSource, LocalIndication.current)
.pointerInput(Unit) {
detectTapGestures(
onPress = { offset ->
val press = PressInteraction.Press(offset)
interactionSource.emit(press)
tryAwaitRelease()
interactionSource.emit(PressInteraction.Release(press))
},
onLongPress = {},
onTap = {}
)
}
)