[Android-Compose] Spacer를 이용해 간단한 선 만들기

이번 포스팅은 정말 간단한 포스팅이다.

개발 시 간단한 수직 선이나 수평선을 만들어야 할 때가 있다. 그럴 때 컴포즈에서는 어떤 식으로 처리하는지 알아보자!

---

우선 많은 방법들이 있지만 이번 예제에서는 Spacer()컴포저블 함수를 사용해 볼 것이다.

Spacer함수는 보통 컴포넌트 간의 공간을 만들고, 레이아웃의 일부 영역을 비워두기 위한 용도로 사용하는데 간단한 선도 만들 수 있다.

그럼 아래 예제를 통해 어떤 식으로 만드는지 알아보자!

# 수직 선 만들기

// 너비가 1dp인 수직선 만들기
Spacer(modifier = Modifier
    .width(1.dp)
    .fillMaxHeight()
    .background(Color.Black)
)

이런 식으로 width값을 주어 간단한 수직선을 만들 수 있다.

#수평 선 만들기 

// 높이가 1dp인 수평선 만들기
Spacer(modifier = Modifier
    .height(1.dp)
    .fillMaxWidth()
    .background(Color.Black)
)

아까와는 반대로 height값을 주어 간단한 수평선을 만들 수 있다.

---

## 주의할 점

만약 spacer안에 padding이 들어간다면 반드시 background 설정 한 이후에 padding을 넣어줘야 정상으로 보인다.

이유는 컴포즈 같은 경우는 위에서부터 순차적으로 적용이 되는데 modifier도 같아서 패딩이 내부 공간을 먼저 변환하고 난 다음 배경색이 적용되기 때문이다. 

따라서, 배경색이 애초에 눈에 보이지 않게 되며, 실제적으로는 적용이 되지 않는 것처럼 보인다.