Compose에서 Modifier.alpha() 적용 후 뷰가 clip되는 문제 해결

LazyColumn을 사용한 리스트 형태의 View를 구현중이었는데

이상하게 item을 Y축으로 움직이는 경우 기존 범위를 벗어나서 뷰가 그려지지 않는 현상이 발생하였다.

 

이에 대한 해결을 위해 다음과 같이 조사하였다.

 

1. Modifier.offset().graphicsLayer(translationY = tY).scale().alpha() 인 경우 O
2. Modifier.offset().graphicsLayer(translationY = tY).alpha().scale() 인 경우 O
3. Modifier.scale().offset().graphicsLayer(translationY = tY).alpha() 인 경우 O
4. Modifier.alpha().offset().graphicsLayer(translationY = tY).scale() 인 경우 X

문제는 Modifier.alpha()가 graphicsLayer 변경보다 앞서 호출되는 경우에 발생하였는데

이것은 Modifier.alpha()의 동작 원리를 보면 알 수 있다.

@Stable
fun Modifier.alpha(
    /*@FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float
) = if (alpha != 1.0f) graphicsLayer(alpha = alpha, clip = true) else this

Modifier.alpha()는 graphicsLayer의 alpha값을 변경함과 동시에 clip = true 를 적용시키는데

바로 이때문에 기존 범위에 clip이 되어서 이후에 translation을 하는 경우 문제가 발생하는 것이었다.

 

Compose는 참 해도해도 어렵다..