Scaffold

머티리얼 디자인에서 스캐폴드는 스캐폴드로 복잡한 사용자 인터페이스를 위한 표준화된 플랫폼입니다. 그것은 다른 종류의 예를 들어 앱 바와 플로팅 작업 버튼과 같은 UI의 부분에 추가하여 일관성 있는 디자인과 느낌을 선사합니다.

Scaffold 컴포저블은 다음과 같은 간단한 API를 제공합니다. 머티리얼 디자인 가이드라인에 따라 앱의 구조를 빠르게 조합해야 합니다. Scaffold는 여러 컴포저블을 매개변수로 허용합니다. 이 중에서도 있습니다.

  • topBar: 화면 상단의 앱 바입니다.
  • bottomBar: 화면 하단의 앱 바입니다.
  • floatingActionButton: 주요 작업을 표시하는 데 사용할 수 있는 화면입니다.

최상위 및 하단을 모두 구현하는 방법에 관한 자세한 예는 앱 바 페이지를 참고하세요.

다른 컨테이너에 전달하는 것처럼 Scaffold 콘텐츠를 전달할 수도 있습니다. 통과 하위 요소에서 사용할 수 있는 content 람다의 innerPadding 값 구성 가능한 함수입니다.

다음 예에서는 맞춤 함수를 구현하는 방법에 대한 Scaffold 상단 앱 바와 하단 앱 바, 플로팅 작업이 포함되어 있습니다. Scaffold의 내부 상태와 상호작용하는 버튼입니다.

@Composable
fun ScaffoldExample() {
    var presses by remember { mutableIntStateOf(0) }

    Scaffold(
        topBar = {
            TopAppBar(
                colors = topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Top app bar")
                }
            )
        },
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary,
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Bottom app bar",
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { presses++ }) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                text =
                """
                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

                    It also contains some basic inner content, such as this text.

                    You have pressed the floating action button $presses times.
                """.trimIndent(),
            )
        }
    }
}

이 구현은 다음과 같이 표시됩니다.

간단한 상단 및 하단 앱 바와 카운터를 반복하는 플로팅 작업 버튼이 포함된 Scaffold의 구현입니다. Scaffold의 내부 콘텐츠는 구성요소를 설명하는 간단한 텍스트입니다.
그림 1. Scaffold의 구현입니다.

추가 리소스