본 게시글은 Material3를 기준으로 작성되었습니다.
Material Design에서 사용되는 Composable function으로 다양한 구성요소와 기타 화면 요소를 제공합니다.
기본적으로 일반 content 후행 람다 슬롯이 있어 컨텐츠 루트에서 PaddingValues 인스턴스를 수신해야합니다.
Scaffold { contentPadding ->
Box(modifier = Modifier.padding(contentPadding)) {
/* ... */
}
}
상단 앱 바나 하단 앱 바(네비게이션 바)를 제공합니다.
Scaffold(Padding ->
Text(
topBar = {
TopAppBar { /* ... */ }
},
bottomBar = {
BottomAppBar { /* ... */ }
// 혹은
// NavigationBar() { /* ... */ }
}
) {
/* ... */
}
플로팅 작업 버튼을 제공합니다.
floatingActionButtonPosition 을 이용하여 가로 위치를 조정할 수 있습니다.
Scaffold(
floatingActionButtonPosition = FabPosition.End,
floatingActionButton = {
FloatingActionButton(onClick = { /* ... */ }) {
/* ... */
}
},
// bottomBar가 있을 시 isFloatingActionButtonDocked 을 이용하여 겹치게 만들 수 있습니다.
isFloatingActionButtonDocked = true,
bottomBar = { /* ... */ }
) {
/* ... */
}
val coroutineScope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
snackbarHost = { SnackbarHost(snackbarHostState) },
floatingActionButtonPosition = FabPosition.End,
floatingActionButton = {
FloatingActionButton(onClick = {
coroutineScope.launch {
snackbarHostState.showSnackbar("Show Snackbar")
}
}) {
/* ... */
}
}
) {
SnackbarHost(
hostState = snackBarHostState,
/* ... */
)
}
오늘은 Scaffold에 대해 간단히 알아보았습니다.
다음에는 Scaffold에서 사용할 수 있는 컴포넌트들을 하나씩 알아보도록 하겠습니다.
혹시나 잘못된 부분이나 부족한 부분이 있다면 댓글로 알려주시면 열심히 배우겠습니다.
읽어주셔서 감사합니다.