Modifier

• 컴포저블 크기, 레이아웃, 동작 및 모양 변경
• 접근성 라벨과 같은 정보 추가
• 사용자 입력 처리
• 요소를 클릭, 스크롤, 드래그, 확대, 축소 같은 상호 작용 추가

@Composable
private fun Greeting(name: String) {
  Column(modifier = Modifier
    .padding(24.dp)
    .fillMaxWidth()
  ) {
    Text(text = "Hello,")
    Text(text = name)
  }
}

• padding : 요소 주위에 공간을 배치
• fillMaxWidth : 최대 너비를 채움
  

수정자의 순서

• 수정자의 순서에 따라 다음의 요청이 반응하지 않게 될 수 있습니다.
• example1

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}

• example2

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .padding(padding)
            .clickable(onClick = onClick)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}

• example1, 2는 같은 내용의 코드이지만 padding의 순서만 다르다
  하지만 example2는 주변 패딩을 포함하지 않고 전체 영역을 선택할 수 있으며
  example1은 주변 패딩을 포함하여 영역을 선택할 수 있다

내장 수정자

패딩 및 크기

• size(width=.., height=...)
  • 지정한 레이아웃의 상위 요소에서 수신된 제약조건이 충족되지 않을 경우 적용되지 않을 수 있습니다
• requiredSize
  • 제약 조건에 관계없이 컴포저블의 크기를 고정해야 하는 경우 사용
• fillMaxSize
  • 하위 레이아웃이 상위 요소에 의해 허용된 모든 가용 높이를 채우도록 한다
  • fillMaxSize 및 fillMaxWidth도 제공
• padding
  • 요소 주위에 패딩을 추가
• paddingFromBaseline
  • 레이아웃 상단에서 기준선까지 특정 거리가 유지되도록 텍스트 기준선 위에 패딩을 추가

offset

@Composable
fun ArtistCard(artist: Artist) {
    Row(/*...*/) {
        Column {
            Text(artist.name)
            Text(
                text = artist.lastSeenOnline,
                modifier = Modifier.offset(x = 4.dp)
            )
        }
    }
}

• 원래 위치를 기준으로 레이아웃을 배치
• 양수 및 음수 적용 가능
• composable에 offset을 추가해도 측정값이 변경되지 않는다
• 레이아웃 방향에 따라 가로로 적용
• 레이아웃 방향을 고려하지 않고 오프셋을 설정해야 하는 경우 양의 오프셋 값이 항상 요소를 오른쪽으로 이동해야 하는 경우 absoluteOffset 을 사용한다

유형 안전성

• 특정 composable 의 하위 요소에 적용될 때만 작동하는 수정자
• 하위 요소를 box 크기에 영향을 미치지 않고 상위 box만큼 크게 만들려면 matchParentSize 수정자를 사용합니다

matchParentSize in box

• boxscope에서만 사용가능하여 하위 요소가 box내에서 사용될때만 사용할 수 있습니다.

@Composable
fun MatchParentSizeComposable() {
    Box {
        Spacer(Modifier.matchParentSize().background(Color.LightGray))
        ArtistCard()
    }
}

행 열의 가중치

• 컴포저블 크기는 컴포저블이 래핑하는 콘텐츠로 정의 됩니다
• rowscope, colutmnscope에서만 사용할 수 있는 weight 수정자를 사용하여 컴포저블 크기를 상위 요소 내에서 유연하게 설정 할 수 있습니다

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.fillMaxWidth()
    ) {
        Image(
            /*...*/
            modifier = Modifier.weight(2f)
        )
        Column(
            modifier = Modifier.weight(1f)
        ) {
            /*...*/
        }
    }
}

수정자 추출 및 재사용

• 여러 수정자를 체이닝하여 컴포저블을 사용할 수 있습니다
• 수정자를 사용하는 컴포저블에 리컴포지션이 발생시 수정자의 재할당이 반복되지 않습니다
• 수정자 체인은 매우 길고 복잡할 수 있습니다. 동일한 체인 인스턴스를 재사용시 compsoe 런타임이 이를 비교해야 할때 해야하는 워크로드를 줄일 수 있습니다.
• 코드 베이스 전체에서 코드 청결도, 일관성, 유지관리성이 향상

Reference

• https://developer.android.com/jetpack/compose/modifiers?hl=ko