如何实现中心下沉角落抬升渐变并修复过渡与重叠问题

问题分析 #

你当前通过叠加两个45°和135°的线性渐变模拟效果，导致两个核心问题：

• 中间区域两个渐变的边界过渡生硬，无法形成自然的曲线效果
• 中心重叠区域因两个渐变的透明度叠加，出现视觉衰减

优化思路 #

放弃叠加线性渐变的方案，改用基于距离计算的自定义渐变或椭圆径向渐变，直接通过单个渐变逻辑实现平滑过渡，避免重叠衰减问题。

修改后的代码 #

自定义逐点计算版（精准控制效果） #

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.unit.dp
import kotlin.math.hypot

@Composable
fun JustGradient() {
    val gradientColorsList: List<Color> = listOf(
        Color.Transparent,
        Color.Transparent,
        Color.Transparent,
        Color.Transparent,
        Color.Transparent,
        Color.Green.copy(alpha = 0.2f),
        Color.Green.copy(alpha = 0.3f),
        Color.Green.copy(alpha = 0.4f),
        Color.Green.copy(alpha = 0.5f),
        Color.Green.copy(alpha = 0.9f)
    )

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(400.dp)
            .background(Color.Red.copy(alpha = .3f))
            .applySmoothGradient(gradientColorsList)
    )
}

private fun Modifier.applySmoothGradient(gradientColorsList: List<Color>?): Modifier = this
    .drawBehind {
        if (gradientColorsList.isNullOrEmpty()) return@drawBehind
        drawSmoothCornerGradient(gradientColorsList)
    }

private fun DrawScope.drawSmoothCornerGradient(colors: List<Color>) {
    val bottomLeft = Offset(0f, size.height)
    val bottomRight = Offset(size.width, size.height)
    val maxDistance = hypot(size.width, size.height)

    drawRect { _, paint ->
        for (x in 0..size.width.toInt()) {
            for (y in 0..size.height.toInt()) {
                val currentPoint = Offset(x.toFloat(), y.toFloat())
                val distanceToLeft = hypot(currentPoint.x - bottomLeft.x, currentPoint.y - bottomLeft.y)
                val distanceToRight = hypot(currentPoint.x - bottomRight.x, currentPoint.y - bottomRight.y)
                val minDistance = minOf(distanceToLeft, distanceToRight)

                val colorIndex = ((minDistance / maxDistance) * (colors.size - 1)).toInt()
                    .coerceIn(0, colors.size - 1)
                paint.color = colors[colorIndex]
                drawPoint(currentPoint, paint = paint)
            }
        }
    }
}

简化径向渐变版（高性能适配） #

如果追求性能，可直接用椭圆径向渐变快速实现：

private fun Modifier.applySmoothGradient(gradientColorsList: List<Color>?): Modifier = this
    .drawBehind {
        if (gradientColorsList.isNullOrEmpty()) return@drawBehind
        drawRect(
            brush = Brush.radialGradient(
                colors = gradientColorsList.reversed(),
                center = Offset(size.width / 2, size.height),
                radius = maxOf(size.width, size.height),
                focalRadius = size.width / 2
            )
        )
    }

代码说明 #

1. 自定义版逻辑：计算每个点到左右底部角落的距离，取较小值映射渐变颜色——距离底部角落越近（抬升区域）颜色越透明，距离中心越近（下沉区域）颜色越深，自然形成平滑曲线过渡。
2. 简化版逻辑：通过椭圆径向渐变，将焦点设置在底部中心，让渐变从中心向左右上角扩散，快速实现视觉匹配的效果，性能远高于逐点绘制。

内容的提问来源于stack exchange，提问作者Sirop4ik