Scaffold

androidx.compose.material.Scaffold представляет сложный компонент, который устанавливает общую структуру страницы. И мы можем встроить в эту структуру различные компоненты. В некотором роде Scaffold выступает в роли еще одного компонента-контейнера. Определение функции компонента:

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable () -> Unit = {},
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
    content: @Composable (PaddingValues) -> Unit
): Unit

Параметры функции компонента:

• modifier: представляет объект Modifier, который определяет модификаторы компонента

• topBar: устанавливает верхнюю панель окна

• bottomBar: устанавливает нижнюю панель окна

• snackbarHost: представляет компонент, который содержит отображаемые на экран объекты Snackbar. Обычно это компонент SnackbarHost.

• floatingActionButton: устанавливает кнопку для выполнения некоторого действия. Обычно в качестве подобной кнопки выступает компонент FloatingActionButton

• floatingActionButtonPosition: задает позицию кнопки из параметра floatingActionButton. Представляет объект типа FabPosition и по умолчанию равно значению FabPosition.End

• containerColor: фоновый цвет компонента Scaffold

• contentColor: цвет содержимого компонента Scaffold

• contentWindowInsets: отступы от границ окна. Применяются только, если не установлены topBar/ bottomBar, иначе для определения отступов будут использоваться настройки topBar/bottomBar

• content: содержимое Scaffold. Представляет вызов функции типа (PaddingValues) -> Unit

Определим простейший Scaffold:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Scaffold{
                Text("Hello METANIT.COM", fontSize = 28.sp, modifier = Modifier.padding(it))
            }
        }
    }
}

В данном случае Scaffold содержит один компонент Text. Стоит отметить, что при определении содержимого Scaffold с помощью функции content нам надо как-то задействовать ее параметр - значение PaddingValues. В данном случае значение it, который представляет параметр типа PaddingValues, передается в Text модификатору padding.

Теперь добавим в Scaffold верхнюю и нижнюю панели:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Scaffold(
                topBar = {
                    @OptIn(ExperimentalMaterial3Api::class)
                    TopAppBar(title= { Text("METANIT.COM", fontSize = 22.sp)},
                        navigationIcon={ IconButton({ }) { Icon(Icons.Filled.Menu, contentDescription = "Меню")}},
                        actions={
                            IconButton({ }) { Icon(Icons.Filled.Info, contentDescription = "О приложении")}
                            IconButton({ }) {Icon(Icons.Filled.Search, contentDescription = "Поиск")}
                        },
                        colors= TopAppBarDefaults.topAppBarColors(containerColor = Color.DarkGray,
                            titleContentColor = Color.LightGray,
                            navigationIconContentColor = Color.LightGray,
                            actionIconContentColor = Color.LightGray))
                },
                bottomBar = {
                    BottomAppBar(
                        containerColor = Color.DarkGray,
                        contentColor = Color.LightGray
                    ){
                        IconButton(onClick = {  }) { Icon(Icons.Filled.Favorite, contentDescription = "Избранное")}
                        Spacer(Modifier.weight(1f, true))
                        IconButton(onClick = {  }) { Icon(Icons.Filled.Info, contentDescription = "Справка")}
                    }
                }
            ){
                Text("Hello METANIT.COM", fontSize = 28.sp, modifier = Modifier.padding(it))
            }
        }
    }
}

В данном случае для верхней и нижней панели применяются соответственно компоненты TopAppBar и BottomAppBar. Тем не менее это необязательно. Мы можем создавать свои собственные композиции компонентов в качестве подобных панелей.

Установка кнопки floatingActionButton

Компонент Scaffold может включать кнопку, которая устанавливается через параметр floatingActionButton и по нажатию на которую выполняется некоторое действие. Обычно это кнопки типа FloatingActionButton или ExtendedFloatingActionButton. Добавим подобную кнопку:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Clear
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FabPosition
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val isAdded = remember{ mutableStateOf(false) }
            Scaffold(
                topBar = {
                    @OptIn(ExperimentalMaterial3Api::class)
                    TopAppBar(title= { Text("METANIT.COM", fontSize = 22.sp)},
                        colors= TopAppBarDefaults.topAppBarColors(containerColor = Color.DarkGray, titleContentColor = Color.LightGray))
                },
                floatingActionButton = {
                    FloatingActionButton(
                        content = {
                            if(isAdded.value) Icon(Icons.Filled.Clear, contentDescription = "Удалить")
                            else Icon(Icons.Filled.Add, contentDescription = "Добавить") },
                        onClick = { isAdded.value = !isAdded.value}
                    )
                },
                floatingActionButtonPosition = FabPosition.Center
            ){
                Text(if(isAdded.value) "Товар добавлен" else "Корзина пуста",
                    fontSize = 28.sp,
                    modifier = Modifier.padding(it))
            }
        }
    }
}

Здесь параметр floatingActionButton получает кнопку FloatingActionButton, которая переключает значение переменной isAdded с true на false и обратно. В зависимости от этого значения устанавливается иконка данной кнопки, а также текст содержимого в Scaffold.

Кроме того, с помощью параметра floatingActionButtonPosition для кнопки установлено позиционирование по центру. Этот параметр принимает одно из двух значений: FabPosition.Center (позиционирование по центру) и FabPosition.End (позиционирование по нижнем углу).