Jetpack Compose中渐变末尾出现1像素异色线条的问题求助

大家好，我最近在开发Jetpack Compose卡片组件时遇到了一个棘手的小问题，想请各位大佬帮忙看看怎么解决😅

我的需求是用水平渐变让卡片内的图片区域平滑过渡到卡片的背景色，但实际运行后发现，渐变的末尾总会出现一条1像素的异色线条，完全破坏了原本该有的自然过渡效果，如图所示：

我已经把问题简化成了最小复现Demo，方便大家复现问题：

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()
    }
}

我自己临时搞了个补丁方案，但感觉只是强行掩盖问题，不是从根源上解决这条线条的出现。想问问各位有没有更优雅的解决思路？

针对这个问题的解决方案 #

其实这个问题本质是Jetpack Compose中渐变绘制的像素精度对齐问题，当渐变的结束边界刚好和组件的像素边界重合时，会因为浮点数精度或者渲染管线的截断逻辑出现这条1像素的线条。给你几个靠谱的解决方向：

1. 微调渐变的覆盖范围
   最简单的办法就是让渐变的结束范围稍微超出组件的边界，比如给horizontalGradient设置endX = 1.01f，让渐变完全覆盖组件的所有像素，避免边缘截断：

   Brush.horizontalGradient(
       colors = listOf(
           Color.Transparent,
           cardColor,
       ),
       endX = 1.01f
   )
   

2. 合并绘制层，减少多层Box的叠加误差
   原来的代码用了两层Box分别绘制图片和渐变，多层绘制可能会引入像素对齐问题。可以用drawWithContent把图片和渐变合并到同一个绘制层里：

   Box(
       modifier = Modifier
           .fillMaxSize()
           .drawWithContent {
               // 先绘制图片底色
               drawRect(Color(0xFFFF6666))
               // 再绘制渐变层
               drawRect(
                   brush = Brush.horizontalGradient(
                       colors = listOf(Color.Transparent, cardColor)
                   )
               )
           }
   )
   

3. 调整组件的尺寸为像素对齐的数值
   如果组件的尺寸是偶数dp，在高DPI屏幕上可能会被转换成非整数像素，也会导致渲染误差。可以给最外层的图片Box加上size(100.dp, 100.dp)（确保宽高是整数dp），或者用Modifier.requiredSize强制尺寸。

亲测第一种方案最快捷有效，而且不会引入额外的性能开销，推荐优先尝试~

备注：内容来源于stack exchange，提问作者AdrienM