Jetpack Compose Scaffold

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

Scaffold

Material Design에서 사용되는 Composable function으로 다양한 구성요소와 기타 화면 요소를 제공합니다.

Material Design 가이드라인을 따르며, 앱의 상단 앱바, 하단 탐색 막대, 콘텐츠 영역 등을 설정할 수 있습니다.

Scaffold 구성 요소

TopAppBar

상단 앱바는 앱의 제목, 액션 버튼, 메뉴 등을 표시할 수 있는 영역입니다. TopAppBar를 사용하여 앱바의 콘텐츠와 동작을 정의할 수 있습니다.

BottomAppBar

하단 탐색 막대는 일반적으로 탐색 메뉴나 액션 버튼을 표시하는 데 사용됩니다. BottomAppBar를 사용하여 하단 막대의 콘텐츠와 동작을 정의할 수 있습니다.

FloatingActionButton

부동 액션 버튼은 일반적으로 앱에서 가장 중요한 작업을 표시하기 위해 사용됩니다. FloatingActionButton을 사용하여 부동 액션 버튼의 모양과 동작을 정의할 수 있습니다.

Content

콘텐츠 영역은 앱의 주요 내용을 표시하는 영역입니다. Content를 사용하여 콘텐츠 영역을 정의할 수 있으며, 보통은 Column이나 Row와 같은 다른 컴포넌트를 사용하여 구성합니다.

[Error] **Content padding parameter it is not used**

만약 Scaffold의 구성요소로 content{ } 부분에 에러가 발생하실 수 있습니다.

Compose 1.2.0부터는 Scaffold 내의 content에 padding value를 적용해야 합니다.

* floatingActionButtonPosition

- floating버튼의 위치를 지정할 수 있습니다. 가능한 위치는 Center와 End입니다.

* isFloatingActionButtonDocked

- floating버튼을 BottomBar의 중간에 걸치고자 한다면 true 값을, 아니면 false값을 사용하시면 됩니다.

* navigationIcon

- TopAppBar의 시작(왼쪽) 부분에 배치되는 아이콘입니다. 주로 메뉴 버튼 또는 네비게이션 아이콘으로 사용됩니다. navigationIcon은 TopAppBar에 단일 아이콘만 배치됩니다.

AppBar

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

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

BottomAppBar

BottomAppBar를 사용하여 하단 막대의 콘텐츠와 동작을 정의할 수 있습니다.

Scaffold(
    bottomBar = {
        BottomAppBar(
            backgroundColor = Color.Blue
        ) {
            IconButton(onClick = {}) {
                Icon(Icons.Default.Favorite, contentDescription = "Favorite")
            }
            IconButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    }

) {
	/* ... */
}

FloatingActionButton

플로팅 작업 버튼을 제공합니다.

floatingActionButtonPosition 을 이용하여 가로 위치를 조정할 수 있습니다.

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

Content

콘텐츠 영역은 앱의 주요 내용을 표시하는 영역입니다. Content를 사용하여 콘텐츠 영역을 정의할 수 있으며, 보통은 Column이나 Row와 같은 다른 컴포넌트를 사용하여 구성합니다.

Scaffold(
    content = {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .podding(it)
        ) { /* ... */ }
    }
) {
	/* ... */
}

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,
        /* ... */
    )
}