Android Compose 椭圆形渐变

示例

使用了自带的圆形渐变 Brush.radialGradient ，将它放大成所需宽度，再在外部嵌套一个Box进行多余内容裁剪。

实现

/**
 * Elliptical gradient
 *椭圆渐变
 */
@Composable
fun EllipticalGradientBox(
    modifier: Modifier = Modifier,
    innerPaddingValues: PaddingValues = PaddingValues(0.dp),
    centerColor: Color = Color(0xFFffbf3f),
    edgeColor: Color = Color(0xFFfff2c3),
    content: @Composable () -> Unit
) {
    var boxWidth by remember { mutableIntStateOf(0) }
    var boxHeight by remember { mutableIntStateOf(0) }

    Box(
        modifier = modifier
            .wrapContentWidth()
            .clip(shape = RoundedCornerShape(200.dp)) // 椭圆形裁剪
            .onGloballyPositioned { layoutCoordinates ->
                // 获取宽高信息
                boxWidth = layoutCoordinates.size.width
                boxHeight = layoutCoordinates.size.height
            }
    ) {
        val aspectRatio = if (boxHeight > 0) boxWidth / boxHeight.toFloat() else 1f
        // 内部的渐变背景
        Box(
            modifier = Modifier
                .matchParentSize()
                .scale(aspectRatio, 1f) // 根据宽高比调整缩放
                .background(
                    brush = Brush.radialGradient(
                        colors = listOf(
                            centerColor, // 中心的深黄色
                            edgeColor, // 边缘的浅黄色
                        )
                    ),
                )
        )

        Box(
            modifier = Modifier.padding(innerPaddingValues),
            contentAlignment = Alignment.Center
        ) {
            content()
        }

    }
}

使用方法

 EllipticalGradientBox(
                innerPaddingValues = PaddingValues(horizontal = 14.dp, vertical = 4.dp)
            ){
                Text(
                    text = "Nu1099025815",
                    fontSize = 30.sp,
                    fontWeight = FontWeight.W500,
                    color = Color(0xff7a4d06)
                )
            }