Modifier의 역할
- Composable의 크기, 레이아웃, 동작, 모양 변경
- 클릭, 스크롤, 드래그, 확대/축소, pull to refresh 등 상호작용
⭐️ Modifier 함수는 호출하는 순서에 따라 결과가 달라질 수 있기 때문에 순서에 신경써서 호출해야한다. ⭐️
자주 사용하는 Modifier 정리
size
- 기본적으로 컴포즈에서 제공하는 레이아웃은 하위요소의 크기에 맞춰짐(WrapContentSize)
- size를 이용하여 크기를 임의로 정할 수 있음
modifier = Modifier.size(width = 400.dp, height = 100.dp)
requiredSize
- 제약조건을 무시하고 크기를 정할 때 사용
- 상위요소 크기에 상관없이 설정 가능
modifier = Modifier.requiredSize(150.dp)
widthIn/heightIn
- 최소/최대 크기를 설정할 때 사용
fillMax
- fillMaxHeight(), fillMaxWidth(), fillMaxSize()로 가득 채우는 용도로 사용
- fillMaxWidth(fraction = 0.5f) 처럼 파라미터로 0.0f ~ 1.0f로 비율을 사용해서 정의할 수 있음
modifier = Modifier.fillMaxWidth(0.5f)
paddingFromBaseline
- 텍스트 기준선에 padding 추가하기 위해 사용
modifier = Modifier.paddingFromBaseline(10.dp, 10.dp)
alignByBaseline
- Row() 내부에서 다른 컴포저블 함수들의 기준선 정렬
- Text가 있을때 서로 글꼴이 다를경우, 기준선이 맞지 않을수 있기 때문에 사용
statusBarsPadding/navigationBarsPadding
- scaffold의 innerPadding처럼 상단 상태바와 네비게이션바 패딩을 제외할 수 있음
background
- 배경을 정의
- [color, shape] 파라미터를 가진 background와 [brush, shape, alpha] 파라미터를 가진 background(그라데이션)가 있음
border
- 테두리를 정의
- width (너비), color(색상), shape(모양) 파라미터로 구성
modifier = Modifier
.border(
width = 1.dp,
color = Color.Blue,
shape = RectangleShape
)
aspectRatio
- 컴포넌트 크기를 비율로 설정 가능
modifier = Modifier.aspectRatio(16f / 9f)zIndex
- 0.0f ~ 1.0f로 설정하여 같은 부모 내에 있는 자식들 끼리 레이어 순위를 정할 수 있음
- 숫자가 클수록 높이 위치
offset
- x, y축으로 설정한 dp 값만큼 이동
clickable
- 클릭 효과
graphicsLayer
- 그래픽 효과 적용
- translation(이동), scale(확대/축소), rotation(회전) 설정 가능
modifier = Modifier.graphicsLayer {
translationX = 10f
}
onGloballyPositioned
- 전역 포지션이 변경되었을 때 호출
- Composition이 완전히 끝났을 때 호출됨
- LayoutCoordinates로 다양한 포지션 정보 가져올 수 있음
Modifier.onGloballyPositioned { coordinates ->
coordinates.size // 사이즈
coordinates.positionInWindow() // 윈도우에 상대적인 position
coordinates.positionInRoot() // 컴포즈 최상위에 상대적인 position
coordinates.providedAlignmentLines // 제공되는 정렬 라인
coordinates.parentLayoutCoordinates // 부모에 해당하는 인스턴스
}
then
두 변경자를 서로 연결하기 위함