Compose Tutorial : 기본 레이아웃

 

Compose Tutorial 6

Compose의 기본 레이아웃  |  Android Developers

 

슬롯 기반 레이아웃

슬롯 기반 레이아웃은 개발자가 원하는 대로 채울 수 있도록 UI에 빈 공간을 남겨 둡니다.

 

컴포즈 UI 재사용성을 위한 레이아웃 방식으로

이 방식을 활용하는 대표적인 예는 TopAppBar, Scaffold 등이 있다.

 

 

특정 영역을 추상화하여 사용하는 곳에서 해당 부분을 채우도록 레이아웃을 구성할 수 있다.

추상화 영역을 컴포저블 람다 타입(content: @Composable () -> Unit)으로 받으면 된다.

컴포즈가 선언형 UI라는게 와닿는 부분이다.

 

Tutorial 예제에서는 다음과 같이 사용했다.

@Composable
fun HomeSection(
    @StringRes title: Int,
    content: @Composable () -> Unit
) {
    Column(
        modifier = Modifier
    ) {
        Text(
            text = stringResource(id = title),
            style = MaterialTheme.typography.titleMedium,
            modifier = Modifier
                .paddingFromBaseline(top = 40.dp, bottom = 16.dp)
                .padding(horizontal = 16.dp)
        )
        content()
    }
}

@Composable
@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
fun HomeSectionPreview() {
    HomeSection(
        title = R.string.align_your_body
    ) {
        CircleCardRow()
    }
}