如何在 Jetpack Compose 中实现形状的顶部和底部渐变？

Question

我需要一个看起来像括号 ( ) 的形状。 我尝试过使用边框修饰符。这样，我就能够在形状的顶部实现渐变效果。

                val styleModifier = Modifier.border(
                    width = 1.dp,
                    brush = Brush.verticalGradient(
                        colors = listOf(
                            Color.White,
                            Color.Gray
                        ),
                        startY = 100f,
                        endY = 500f,
                        tileMode = TileMode.Clamp
                    ),
                    SmootherShape(
                        slidingRadius,
                        slidingSmoothness
                    )
                )

           Box(
                Modifier
                    .then(styleModifier)
            )

有什么方法可以在底部实现类似于顶部的渐变，从而给出类似 ( ) 的形状。

Answer 1

您可以应用一个技巧来实现您的目标。也就是将五个

colors

的列表传递给

gradient

。

它将如下所示

示例代码

@Preview(showBackground = true)
@Composable
private fun TestPreview() {
    val styleModifier = Modifier.border(
        width = 1.dp,
        brush = Brush.verticalGradient(
            colors = listOf(
                Color.White,
                Color.Gray,
                Color.Gray,
                Color.Gray,
                Color.White
            ),
            tileMode = TileMode.Clamp
        ),
        shape = RoundedCornerShape(25.dp)
    )

    Box(
        Modifier
            .padding(15.dp)
            .size(150.dp)
            .then(styleModifier)
    )
}