| sitelink1 | https://aroundck.tistory.com/8192 |
|---|---|
| sitelink2 | |
| sitelink3 |
Android View 시스템에서 margin 은 View 가 가지고 있는 속성이었지만, Compose 에서는 View 가 해당 속성을 가지지 않는다.
그래서 Modifier 에 padding 은 있지만 margin 은 없다.
그러면 Compose 에서 margin 은 어떻게 구현할까?
#
사실 Compose 에서는 Android View 시스템에서 사용하던 box model 을 사용하지 않는다.
그래서 padding 이라는 말은 Android View 시스템의 padding 에 딱 맞지 않고, spacing (공간 주기)로만 이해하면 된다.
#
가장 간단한 방법은 "Spacer" 라는 composable 을 이용하는 것!
Text(text = "Hello!")
Spacer(modifier = Modifier.width(10.dp))
Image(painter = painterResource(id = R.drawable.icon), contentDescription = null)
#
두번째 방법은 padding 을 갖거나, spacedBy 로 offset 이 지정된 container composable 안에 margin 을 주고자 하는 composable 을 담는 것.
그러나 이는 꼭 필요한 경우가 아니면 추천하고 싶지 않은 방법.
Column(
modifier = Modifier.padding(32.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
){ ... }
#
Modifier.offset, Modifier.padding 을 이용할 수도 있다. 그러나 이는 배경 영역, click 영역등에 대한 이슈가 생길 수 있다.
위에서 설명한 것과 같이 compose 에서의 padding 은 space 개념이고, 호출 순서에 따라서 동작이 달라진다.
예를 들어 clickable 과 padding 의 함수 호출 순서에 따라 clickable 영역이 달라진다.
이를 잘 이해하고 사용한다면, Spacer 보다 더 추천되는 방법일 수도 있겠다.
