[Kotlin] 코틀린 JetPack Compose Modifier

Modifier

Jetpack Compose에서 사용하는 메서드

Text, Box같은 Compose 기본 컴포저블 함수에 기본적으로 modifier 파라미터를 가지고 있음

UI 요소를 다루기 위한 도구로 XML보다 편리하게 사용 가능

 

Text(
    text = "Click me!",
    modifier = Modifier
        .padding(16.dp) // 16dp만큼 패딩을 줌
        .background(Color.Yellow) // 배경을 노란색으로
        .clickable { println("Clicked!") } // 클릭이벤트 설정
)

 

위와 같이 Text함수의 modifier 파라미터에 전달하면 됨

.을 여러번 사용하여 여러 속성을 한번에 다루는 체이닝 방식을 사용

 

 

기본적으로 있는 컴포저블 이외에 @Composable을 통해 만든 컴포저블에도 modifier를 사용할 수 있음

@Composable
fun MyCard(modifier: Modifier = Modifier) {
    Box(
        modifier = modifier // Modifier 아님!
            .padding(8.dp)
            .background(Color.LightGray)
    ) {
        Text("I'm inside MyCard")
    }
}

 

이와같이 함수를 만들면 기존의 컴포저블처럼 modifier를 전달하거나

그렇지 않다면 modifier: Modifier = Modifier 을 통해 빈 Modifier를 생성하여 사용함

 

 

modifier 종류

/*
* 1. Modifier.padding()
* 요소 주위에 여백을 추가
* 기본적으로 네 방향에 동일한 여백을 줌
* top, bottom, start, end로 방향 지정 가능
*/
modifier = Modifier.padding(16.dp)

/*
* 2. Modifier.background()
* Color를 이용하여 배경색 지정
*/
modifier = Modifier.background(Color.Blue)

/*
* 3. Modifier.clickable()
* 클릭 이벤트 추가
*/
modifier = Modifier.clickable {
    println("Text clicked!")
}

/*
* 4. Modifier.align()
* UI요소를 정렬 시킴
*/
modifier = Modifier.align(Alignment.Center)

/*
* 5. Modifier.size()
* UI요소의 크기 고정
* 패딩과 같은 단위 사용
*/
modifier = Modifier.size(100.dp)

 

 

 

 

[Kotlin] 코틀린 @Composable 어노테이션 (Jetpack Compose)