![](/img/trans.png)
[英]Border radius is not changing based on shape when user click on it jetpack compose
[英]Jetpack Compose Surface click ripple is not clipped based on shape?
我有 3 個表面,如 gif 中所示,當我單擊漣漪效應傳播時沒有考慮表面的形狀。
是用什么創建的
@Composable
fun SurfaceClickPropagationExample() {
// Provides a Context that can be used by Android applications
val context = AmbientContext.current
// 🔥 Offset moves a component in x and y axes which can be either positive or negative
// 🔥🔥 When a component inside surface is offset from original position it gets clipped.
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.clipToBounds()
.clickable(onClick = {})
) {
Surface(
modifier = Modifier
.preferredSize(150.dp)
.padding(12.dp)
.clickable(onClick = {
})
.clipToBounds(),
elevation = 10.dp,
shape = RoundedCornerShape(10.dp),
color = (Color(0xFFFDD835))
) {
Surface(
modifier = Modifier
.preferredSize(80.dp)
.clipToBounds()
.offset(x = 50.dp, y = (-20).dp)
.clickable(onClick = {
}),
elevation = 12.dp,
shape = CircleShape,
color = (Color(0xFF26C6DA))
) {
}
}
Surface(
modifier = Modifier
.preferredSize(110.dp)
.padding(12.dp)
.offset(x = 110.dp, y = 20.dp)
.clickable(onClick = {}),
shape = CutCornerShape(10.dp),
color = (Color(0xFFF4511E)),
elevation = 8.dp
) {}
}
}
我添加了Modifier.clipToBounds()
來檢查它是否適用於它,但無論有沒有它都不起作用。
撰寫版本 1.0.0-beta08 的更新:
使用接受 onClick 的 Surface 的新實驗重載。
@ExperimentalMaterialApi
@Composable
fun Surface(
onClick: () -> Unit,
modifier: Modifier = Modifier,
shape: Shape = RectangleShape,
color: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(color),
border: BorderStroke? = null,
elevation: Dp = 0.dp,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
indication: Indication? = LocalIndication.current,
enabled: Boolean = true,
onClickLabel: String? = null,
role: Role? = null,
content: () -> Unit
): @ExperimentalMaterialApi @Composable Unit
嘗試在 Modifier.clickable 之前應用Modifier.clickable
Modifier.clip(shape: Shape)
。
在撰寫中使用修飾符時,順序很重要。 首先出現的修飾符元素將首先應用。 ( 文檔)
當帶有onClick
參數的Surface
和Card
布局都是實驗性的時,我正在寫這個答案。
如果您不想使用實驗性組件,可以嘗試將視圖包裝在Button
組件中,如下所示:
Button(
onClick = { /* TODO to handle */ },
shape = /* your shape */,
colors = ButtonDefaults.buttonColors(backgroundColor = /* your color */),
elevation = elevation(defaultElevation = 0.dp, pressedElevation = 0.dp)
) {
/* Here you can paste your parent layout like Box, Column, or Row,
but set max size and horizontal alignment to override the default button's center horizontal alignment */
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.Start
) {
// other stuff there
}
}
結果如下:
我不太喜歡 Surface 的漣漪效應。
您還可以在使用clickable
修改器時剪輯波紋效果:
Row(modifier = Modifier.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(bounded = true),
) {
onClick(filter)
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.