如何在 Jetpack Compose 中创建椭圆渐变

Question

I need oval gradient for a background, but all I'm able to get is perfectly round gradient with Brush.radialGradient(..) :

Modifier
    .fillMaxSize()
    .background(
        brush = Brush.radialGradient(
            colors = listOf(Color(0xFFffffff), Color(0xFF000000)),
        ),
    )

This is what I need (the shape of the oval must of course be aligned with screen size ratio):

But all I am able to produce, is this:

Any ideas on how can I solve this?

Answer 1

Radical gradient shouldn't stretch like this, it determine pixel color depending on distance from the center.

I'm not sure why there's no "Oval" gradient, but it's missing from android itself, and compose is just an interlayer here.

What is usually done in the android is just scaling the view. You can do it on compose too:

BoxWithConstraints(
    Modifier
        .fillMaxSize()
) {
    val aspectRatio = maxWidth / maxHeight
    Box(
        Modifier
            .fillMaxSize()
            .scale(maxOf(aspectRatio, 1f), maxOf(1 / aspectRatio, 1f))
            .background(
                brush = Brush.radialGradient(
                    colors = listOf(Color(0xFFffffff), Color(0xFF000000)),
                ),
            )
    )
}

Here I'm using BoxWithConstraints to get maxWidth and maxHeight , in order to calculate needed scale.