Jetpack Compose中的渐变与1像素线的颜色错位

移动开发 2026-07-12

我最初的目标是使用渐变把我的图片与背景实现平滑过渡。使用渐变时，我出现了一条一像素的线，打破了与卡片其余部分的自然过渡。这条线出现在渐变的末端。

[梯度线问题]

下面是最小复现代码，我将给出我的“修复”方法，但看起来像是在这个问题上打补丁而不是真正修复这条一像素的线

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun PocGradientCard() {
    val cardColor = Color(0xFF64748B)//MaterialTheme.colorScheme.surface

    Card(
        shape = RoundedCornerShape(32.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        modifier = Modifier
            .fillMaxWidth(),
    ) {
        Row(modifier = Modifier
            .fillMaxWidth()
            .background(cardColor)) {
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(cardColor)
            ) {
                Box( //This is a placeholder for the picture
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color(0xFFFF6666))
                )

                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(
                            Brush.horizontalGradient(
                                colors = listOf(
                                    Color.Transparent,
                                    cardColor,
                                ),

                            )
                        )
                )

                /* Put patch here */
            }

            Column(
                modifier = Modifier
                    .weight(1f)
                    .padding(24.dp),
                verticalArrangement = Arrangement.Center,
            ) {
                Text(
                    text = "Name",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.SemiBold,
                    color = Color(0xFF1E293B),
                    modifier = Modifier.padding(bottom = 4.dp)
                )
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun PreviewPoc() {
    XTheme {
        PocGradientCard()
    }
}

解决方案

是否有特定原因需要透明渐变？那个红色框看起来是多余的。你可以把它移除，让渐变直接从红色过渡到背景色cardColor，这样就能在没有伪影的情况下得到相同的视觉效果。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(cardColor)
) {
    // This layer causes the visible pixel line
    // Box(
    //     modifier = Modifier
    //         .fillMaxSize()
    //         .background(Color(0xFFFF6666))
    // )

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                Brush.horizontalGradient(
                    colors = listOf(
                        Color(0xFFFF6666), // Start with the red color
                        cardColor,         // Transition directly to background
                    )
                )
            )
    )
}

我最好的猜测是，你看到的那条1像素的线很可能是Compose（通过 Skia）计算和栅格化渐变颜色的副作用。渐变在浮点空间内进行插值，然后再映射到物理像素上，因此最终渲染的像素可能与预期颜色不完全一致，这在叠加到另一种颜色上时会出现一条细缝。

通过移除额外的红色层，让渐变直接与 cardColor 融合，伪影就会消失，布局也会变得更简单。

Android