Scaffold

В Material Design, scaffold є фундаментальною структурою яка забезпечує стандартизовану платформу для складних юзер-інтерфейсів (UI). Ця штука тримає разом різні частини UI, такі як панелі і плаваючі кнопки (floating action button). Це дає зрозумілий вигляд для аплікації.

Приклад

Composable Scaffold надає простий API який дозволяє швидко скласти структуру додатку який відповідає гайдлайнам Material Design. Scaffold приймає такі параметри:

• topBar : панель застосунку зверху екрана
• bottomBar : панель застосунку знизу екрана
• floatingActionButton : кнопка, що знаходиться в правому нижньому куті екрана та дозволяє виконувати ключові дії.

Також у Scaffold можна передати і сам контент. В контенті буде доступний один аргумент - innerPadding який можна буде передати внутрішнім компонентам

Нижче наводиться повний приклад того як можна реалізувати Scaffold

Приклад містить верхню панель(topBar), нижню панель(bottomBar), і плаваючу кнопку(floatingActionButton) яка взаємодіє з внутрішнім вмістом(контентом):

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldExample() {
    var presses by remember { mutableIntStateOf(1) }

    Scaffold(
        topBar = {
            TopAppBar(
                colors = topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Верхня панель")
                }
            )
        },
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary,
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Нижня панель",
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { presses++ }) {
                Icon(Icons.Default.Add, contentDescription = "Додати")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                fontSize = 18.sp,
                text =
                    """
                     В Material Design, scaffold є фундаментальною структурою яка забезпечує стандартизовану платформу для складних юзер-інтерфейсів (UI). Ця штука тримає разом різні частини UI, такі як панелі і плаваючі кнопки (floating action button). Це дає зрозумілий вигляд для аплікації.
                """.trimIndent(),
            )

            Text(
                text = "$presses",
                textAlign = TextAlign.Center,
                fontSize = 80.sp,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp)
                    .wrapContentHeight()
            )
        }
    }
}