Android Compose中使用drawBehind时如何修改绘制圆弧的背景色

我在Jetpack Compose的列表项中用drawBehind绘制了带颜色编码的圆弧，选中项时通过.background设置了高亮背景，但该背景色无法覆盖圆弧所在区域。代码如下：

Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .padding(Dimen.padding_m)
            .background(color = if (selectedModuleId == module.id) MyColors.secondaryLight else Color.Transparent)
            .drawBehind {
                drawArc(
                    color = Color(module.parsedColor),
                    startAngle = 225f,
                    sweepAngle = 260f,
                    useCenter = false,
                    topLeft = Offset(-80f, 0f),
                    size = Size(80f, size.height)
                )
            }
            .height(IntrinsicSize.Min)
            .clickable { onSelected(module) }
            .fillMaxWidth()
    )

问题原因 #

drawBehind的绘制层级在.background之上，因此圆弧会直接覆盖下层的背景色，导致选中状态的背景无法作用于圆弧区域。

解决方法 #

需要在drawBehind中主动绘制圆弧的背景层，背景色跟随选中状态变化，再绘制前景圆弧。

修改后的完整代码 #

Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
        .padding(Dimen.padding_m)
        .background(color = if (selectedModuleId == module.id) MyColors.secondaryLight else Color.Transparent)
        .drawBehind {
            val isSelected = selectedModuleId == module.id
            // 先绘制圆弧背景层，与前景圆弧区域完全匹配
            drawArc(
                color = if (isSelected) MyColors.secondaryLight else Color.Transparent,
                startAngle = 225f,
                sweepAngle = 260f,
                useCenter = false,
                topLeft = Offset(-80f, 0f),
                size = Size(80f, size.height),
                // 注意设置与前景圆弧一致的描边宽度
                style = Stroke(width = 4.dp.toPx()) // 替换为你实际的圆弧宽度
            )
            // 绘制前景圆弧
            drawArc(
                color = Color(module.parsedColor),
                startAngle = 225f,
                sweepAngle = 260f,
                useCenter = false,
                topLeft = Offset(-80f, 0f),
                size = Size(80f, size.height)
            )
        }
        .height(IntrinsicSize.Min)
        .clickable { onSelected(module) }
        .fillMaxWidth()
)

优化方案：封装自定义Modifier #

如果多个列表项需要复用该逻辑，可以封装成自定义Modifier，提升代码复用性：

fun Modifier.moduleArc(
    isSelected: Boolean,
    arcColor: Color,
    selectedBgColor: Color,
    strokeWidth: Float
) = this.then(
    Modifier.drawBehind {
        if (isSelected) {
            drawArc(
                color = selectedBgColor,
                startAngle = 225f,
                sweepAngle = 260f,
                useCenter = false,
                topLeft = Offset(-80f, 0f),
                size = Size(80f, size.height),
                style = Stroke(width = strokeWidth)
            )
        }
        drawArc(
            color = arcColor,
            startAngle = 225f,
            sweepAngle = 260f,
            useCenter = false,
            topLeft = Offset(-80f, 0f),
            size = Size(80f, size.height)
        )
    }
)

使用方式：

Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
        .padding(Dimen.padding_m)
        .background(color = if (selectedModuleId == module.id) MyColors.secondaryLight else Color.Transparent)
        .moduleArc(
            isSelected = selectedModuleId == module.id,
            arcColor = Color(module.parsedColor),
            selectedBgColor = MyColors.secondaryLight,
            strokeWidth = 4.dp.toPx()
        )
        .height(IntrinsicSize.Min)
        .clickable { onSelected(module) }
        .fillMaxWidth()
)

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