(기초) 1-5. Modifier 활용

Modifier란? 

• Modifier는 Compose UI 요소를 꾸미고 동작을 제어하는 역할을 한다. 
• 레이아웃, 크기, 패딩, 클릭, 배경, 정렬 등 거의 모든 UI 속성을 Modifier를 통해 지정할 수 있다.
• 여럭의 Modifer를 연쇠적으로 연결할 수 있으며, 순서가 결과에 영향을 줄 수 있다. 

Modifier.fillMaxWidth()
    .padding(16.dp)
    .background(Color.LightGray)
    .clickable { /* 클릭 이벤트 */ }

 

자주 사용하는 Modifier

padding(dp)	내부 여백 설정	Modifier.padding(16.dp)
fillMaxWidth() / fillMaxHeight() / fillMaxSize()	부모 크기에 맞춰 크기 확장	Modifier.fillMaxWidth()
size(width.dp, height.dp)	고정 크기 설정	Modifier.size(100.dp, 50.dp)
background(Color)	배경색 지정	Modifier.background(Color.Gray)
clickable { }	클릭 이벤트 처리	Modifier.clickable { println("Clicked") }
border(width.dp, Color)	테두리 설정	Modifier.border(2.dp, Color.Black)
clip(shape)	모서리 둥글게 등 모양 자르기	Modifier.clip(RoundedCornerShape(8.dp))
align(alignment)	레이아웃 내 정렬	Modifier.align(Alignment.CenterHorizontally)
weight(fraction)	Row/Column에서 공간 분배	Modifier.weight(1f)
offset(x.dp, y.dp)	위치 이동	Modifier.offset(x = 8.dp, y = 4.dp)

 

예제 :

@Composable
fun ComposeModifierComposition() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
            .background(Color(0xFFe0E0E0))
            .border(2.dp, Color.Black)
            .clip(RoundedCornerShape(8.dp)),
    ) {
        Spacer(modifier = Modifier.height(12.dp))
        Text(
            "Compose Title",
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.Yellow)
                .padding(16.dp),
            textAlign = TextAlign.Center
        )

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp)  // 충분한 높이 확보
                .padding(top = 16.dp),
            horizontalArrangement = Arrangement.Center // 가로 중앙 정렬
        ) {
            Checkbox(checked = true, onCheckedChange = {})
            Spacer(modifier = Modifier.width(8.dp)) // 컴포넌트 간 간격
            Switch(checked = false, onCheckedChange = {})
        }
    }
}

 

Modifier 활용 핵심 포인트

1. 레이아웃 제어

• fillMaxSize, fillMaxWidth, weight, align 등을 활용해 위치와 크기 조절

2. 공간 조절

• padding, offset, Spacer 등을 통해 여백과 간격 제어

3. 시각적 스타일

• background, border, clip 등을 활용해 UI 디자인

4. 사용자 상호작용

• clickable, pointerInput 등으로 클릭, 터치 이벤트 처리