Compose Scaffold 알아보기

woobin·2023년 1월 9일
0

Jetpack Compose

목록 보기
3/4


본 게시글은 Material3를 기준으로 작성되었습니다.

Scaffold

Material Design에서 사용되는 Composable function으로 다양한 구성요소와 기타 화면 요소를 제공합니다.
기본적으로 일반 content 후행 람다 슬롯이 있어 컨텐츠 루트에서 PaddingValues 인스턴스를 수신해야합니다.

Scaffold { contentPadding ->
	Box(modifier = Modifier.padding(contentPadding)) {
    	/* ... */
    }
}

AppBar

상단 앱 바나 하단 앱 바(네비게이션 바)를 제공합니다.

Scaffold(Padding ->
        Text(
	topBar = {
    	TopAppBar { /* ... */ }
    },
    bottomBar = {
    	BottomAppBar { /* ... */ }
        // 혹은
        // NavigationBar() { /* ... */ }
    }
) {
	/* ... */
}

FloatingActionButton

플로팅 작업 버튼을 제공합니다.
floatingActionButtonPosition 을 이용하여 가로 위치를 조정할 수 있습니다.

Scaffold(
	floatingActionButtonPosition = FabPosition.End,
	floatingActionButton = {
    	FloatingActionButton(onClick = { /* ... */ }) {
        	/* ... */
        }
    },
    
    // bottomBar가 있을 시 isFloatingActionButtonDocked 을 이용하여 겹치게 만들 수 있습니다.
    isFloatingActionButtonDocked = true,
    bottomBar = { /* ... */ }
) {
	/* ... */
}

Snackbar

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에서 사용할 수 있는 컴포넌트들을 하나씩 알아보도록 하겠습니다.

혹시나 잘못된 부분이나 부족한 부분이 있다면 댓글로 알려주시면 열심히 배우겠습니다.
읽어주셔서 감사합니다.

0개의 댓글