[英]Semi oval shape in Jetpack Compose
I am trying to create a custom selectable composable and for the selected indicator, I would like to have a section at the end of the composable with a rounded edge.我正在尝试创建一个自定义的可选择组合,对于选定的指标,我希望在可组合的末尾有一个带有圆形边缘的部分。 The final look would be something like this:
最终的外观是这样的:
What I have currently is a box at the end with the correct background and I am trying to have another box just before which will act as the rounded edge.我目前拥有的是一个带有正确背景的盒子,我正试图在它之前有另一个盒子作为圆边。
The issue is that I am trying to use a GenericShape
within the clip
modifier and play with the Path
.问题是我试图在
clip
修改器中使用GenericShape
并使用Path
播放。 I have use a quadraticBezierTo
function but the result isn't great since the top start and bottom start edges are very sharp.我使用了
quadraticBezierTo
函数,但结果不是很好,因为顶部开始和底部开始边缘非常锋利。
I have looked for some Oval shap in Compose but I haven't found my luck yet.我在 Compose 中寻找了一些椭圆形的形状,但我还没有找到我的运气。
Here is my current implementation:这是我当前的实现:
@Composable
fun SelectableCard(
information: @Composable RowScope.(modifier: Modifier) -> Unit,
selected: Boolean = false
) {
Card(
modifier = Modifier
.fillMaxWidth()
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min)
) {
information(
modifier = Modifier
.padding(
vertical = dimensionResource(id = R.dimen.spacing_semi_small),
horizontal = dimensionResource(id = R.dimen.spacing_small),
)
)
// Selected indicator
Box(
modifier = Modifier
.fillMaxHeight()
.clip(
GenericShape { size, _ ->
val width: Float = size.width
val height: Float = size.height
// Starting point
moveTo(width, 0f)
quadraticBezierTo(
x1 = 0f,
y1 = height / 2,
x2 = width,
y2 = height
)
}
)
.background(Color.Red)
.width(20.dp)
)
Box(
modifier = Modifier
.fillMaxHeight()
.width(60.dp)
.background(Color.Red),
)
}
}
}
You can use a GenericShape
like:您可以使用
GenericShape
,例如:
class OvalCornerShape(
size: Dp
) : Shape {
override fun createOutline(
size: Size,
layoutDirection: LayoutDirection,
density: Density
): Outline {
val rect = size.toRect()
val path = Path().apply {
addOval(rect)
}
return Outline.Generic(path)
}
}
and apply it to the Box
.并将其应用于
Box
。 Something like:就像是:
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
) {
// Selected indicator
Box(
modifier = Modifier
.offset(x= 10.dp)
.fillMaxHeight()
.width(60.dp)
.background(Color.Red)
)
Box(
modifier = Modifier
.fillMaxHeight()
.clip(OvalCornerShape(10.dp))
.background(Color.Red)
.width(20.dp)
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.