UI Components

Отображает текст на экране.

Text(text = "Hello, Compose!")

Текст фиксированной высоты c расположением center_vertical

Text(
    text = stringResource(R.string.text),
    modifier = Modifier
        .constrainAs(anyText) {
            width = Dimension.wrapContent
            height = Dimension.value(48.dp)
            start.linkTo(parent.start)
            top.linkTo(parent.top)
        }
        .wrapContentHeight(Alignment.CenterVertically)
)

Enforcing constraints. Текст сокращается в зависимости от контента рядом

Row {
    Text(
        text = "Text",
        overflow = TextOverflow.Ellipsis,
        maxLines = 1,
        modifier = Modifier.weight(weight = 1F, fill = false)
    )

    Icon(
        painter = painterResource(R.drawable.ic_icon),
        contentDescription = null
    )
}

Базовый компонент для отображения текста.

BasicText("Hello, World!")

Текст, который реагирует на клики.

ClickableText(
    text = AnnotatedString("Click me"),
    onClick = { offset -> /* handle click */ }
)

Кнопка, которая выполняет действие при нажатии.

Button(onClick = { /* Действие при нажатии */ }) {
    Text("Click Me")
}

Кнопка с текстом, без фона и границ.

TextButton(onClick = { /* Handle click */ }) {
    Text("Click Me")
}

Кнопка с контуром вместо заполнения.

OutlinedButton(onClick = { /* Действие */ }) {
    Text("Outlined Button")
}

Кнопка, которая содержит только иконку.

IconButton(onClick = { /* Действие */ }) {
    Icon(Icons.Default.Favorite, contentDescription = "Like")
}

Кнопка с иконкой и заполненным фоном.

FilledIconButton(onClick = { /* Handle click */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = null)
}

Кнопка с иконкой и менее ярким фоном.

FilledTonalIconButton(onClick = { /* Handle click */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = null)
}

Кнопка с иконкой и обводкой.

OutlinedIconButton(onClick = { /* Handle click */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = null)
}

Круглая кнопка с иконкой.

CircleIconButton(onClick = { /* Handle click */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = null)
}

Кнопка с тенью.

ElevatedButton(onClick = { /* Handle click */ }) {
    Text("Click Me")
}

Кнопка с заполненным фоном.

FilledButton(onClick = { /* Handle click */ }) {
    Text("Click Me")
}

Кнопка с заполненным, но менее ярким фоном.

FilledTonalButton(onClick = { /* Handle click */ }) {
    Text("Click Me")
}

Кнопка для управления значениями ползунка.

InlineSliderButton(onClick = { /* Handle click */ }) {
    Text("Slider Button")
}

Кнопка-переключатель с иконкой.

IconToggleButton(checked = false, onCheckedChange = { /* Handle check change */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = null)
}

Кнопка-переключатель с заполненным фоном.

FilledIconToggleButton(checked = false, onCheckedChange = { /* Handle check change */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = null)
}

Кнопка-переключатель с менее ярким фоном.

FilledTonalIconToggleButton(checked = false, onCheckedChange = { /* Handle check change */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = null)
}

Кнопка-переключатель с обводкой.

OutlinedIconToggleButton(checked = false, onCheckedChange = { /* Handle check change */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = null)
}

Отображает изображение.

Image(
		painter = painterResource(id = R.drawable.image),
		contentDescription = "Example Image"
)

Отображает иконку, например из набора Material Icons.

Icon(imageVector = Icons.Default.Home, contentDescription = "Home Icon")

Поле для ввода текста.

var text by remember { mutableStateOf("") }
TextField(
		value = text, 
		onValueChange = { text = it }, 
		label = { Text("Enter text") }
)

Floating Suffix

internal class SuffixTransformation(
    private val suffix: String
): VisualTransformation {

    override fun filter(text: AnnotatedString): TransformedText {
        val result = text + AnnotatedString(
            text = suffix
        )

        val textWithSuffixMapping = object: OffsetMapping {
            override fun originalToTransformed(offset: Int): Int {
                return offset
            }

            override fun transformedToOriginal(offset: Int): Int {
                if (text.isEmpty()) return 0
                if (offset >= text.length) return text.length
                return offset
            }
        }

        return TransformedText(result, textWithSuffixMapping )
    }
}

TextField(
    value = text,
    onValueChange = { value: String ->
        text = value
    },
    visualTransformation = if (text.isNotEmpty()) SuffixTransformation(suffix = "₽") else VisualTransformation.None
)

Password Field

var password by remember { mutableStateOf("") }
var passwordVisible by rememberSaveable { mutableStateOf(false) }

TextField(
    value = titleText,
    onValueChange = { value: String ->
        password = value
    },
    trailingIcon = {
        AnimatedVisibility(
            visible = password.isNotEmpty()
        ) {
            IconButton(
                onClick = {
                    passwordVisible = !passwordVisible
                }
            ) {
                Icon(
                    imageVector = if (passwordVisible) MoviesIcons.Visibility else MoviesIcons.VisibilityOff,
                    contentDescription = null
                )
            }
        }
    },
    visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation()
)

Текстовое поле с обводкой.

var text by remember { mutableStateOf("") }
OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Enter text") }
)

Компонент для выбора “включено/выключено”.

var checked by remember { mutableStateOf(false) }
Checkbox(
		checked = checked, 
		onCheckedChange = { checked = it }
)

Переключатель для изменения состояния (аналог чекбокса, но в стиле тумблера).

var switched by remember { mutableStateOf(false) }
Switch(
		checked = switched, 
		onCheckedChange = { switched = it }
)

Ползунок для выбора значения.

var sliderValue by remember { mutableStateOf(0f) }
Slider(
		value = sliderValue, 
		onValueChange = { sliderValue = it }
)

Ползунок с диапазоном значений.

var range by remember { mutableStateOf(0f..100f) }
RangeSlider(values = range, onValueChange = { range = it })

Ползунок для выбора значений.

InlineSlider(value = 0.5f, onValueChange = { /* Handle change */ })

Радио-кнопка для выбора одного элемента из группы.

var selected by remember { mutableStateOf(false) }
RadioButton(
		selected = selected, 
		onClick = { selected = !selected }
)

Группа радиокнопок для выбора одного варианта.

Column {
    RadioButton(selected = true, onClick = { /* Действие */ })
    RadioButton(selected = false, onClick = { /* Действие */ })
}

Линия-разделитель между элементами.

Divider()

Невидимый элемент, используемый для создания отступов между элементами.

Spacer(modifier = Modifier.height(16.dp))

Индикатор выполнения в виде круга.

CircularProgressIndicator()

Индикатор выполнения в виде полосы.

LinearProgressIndicator()

Карточка с закругленными углами.

Card(elevation = 4.dp) {
    Text("This is a card")
}

Карточка с тенью.

ElevatedCard {
    Text("Elevated Card")
}

Карточка с обводкой.

OutlinedCard {
    Text("Outlined Card")
}

Карточка для отображения информации.

AppCard {
    Text("App Card")
}

Карточка с заголовком.

TitleCard {
    Text("Title Card")
}

Классическая карточка.

ClassicCard {
    Text("Classic Card")
}

Широкая классическая карточка.

WideClassicCard {
    Text("Wide Classic Card")
}

Компактная карточка.

CompactCard {
    Text("Compact Card")
}

Карточка с функцией свайпа для раскрытия.

SwipeToRevealCard(
    swipeThreshold = 100.dp,
    onSwipe = { /* Handle swipe action */ }
) {
    Text("Swipe Me")
}

Плавающая кнопка для важных действий.

FloatingActionButton(onClick = { /* Действие */ }) {
    Icon(Icons.Default.Add, contentDescription = "Add")
}

Небольшая плавающая кнопка действия.

SmallFloatingActionButton(onClick = { /* Handle click */ }) {
    Icon(Icons.Filled.Add, contentDescription = null)
}

Большая плавающая кнопка действия.

LargeFloatingActionButton(onClick = { /* Handle click */ }) {
    Icon(Icons.Filled.Add, contentDescription = null)
}

Расширенная версия FloatingActionButton с текстом.

ExtendedFloatingActionButton(
    text = { Text("Action") },
    onClick = { /* Handle click */ }
)

Компонент для верхней панели приложения.

TopAppBar(title = { Text("App Title") })

Нижняя панель приложения, часто используется с FAB.

BottomAppBar {
    Text("Bottom App Bar")
}

Нижняя панель для навигации по приложению.

BottomNavigation {
    BottomNavigationItem(icon = { Icon(Icons.Default.Home, contentDescription = null) }, selected = false, onClick = { /* Действие */ })
}

Панель навигации сбоку, используемая для отображения меню.

ModalDrawer(
    drawerContent = { Text("Drawer content") },
    content = { Text("Main content") }
)

Компонент для создания вкладок.

var selectedTabIndex by remember { mutableStateOf(0) }
TabRow(selectedTabIndex = selectedTabIndex) {
    Tab(selected = selectedTabIndex == 0, onClick = { selectedTabIndex = 0 }) {
        Text("Tab 1")
    }
    Tab(selected = selectedTabIndex == 1, onClick = { selectedTabIndex = 1 }) {
        Text("Tab 2")
    }
}

Панель с вкладками, которая поддерживает горизонтальную прокрутку.

ScrollableTabRow(selectedTabIndex = 0) {
    Text("Tab 1")
    Text("Tab 2")
}

Панель вкладок без прокрутки.

PrimaryTabRow(selectedTabIndex = 0) {
    Tab(selected = true, onClick = { /* Handle click */ }) {
        Text("Tab 1")
    }
}

Панель вкладок с возможностью прокрутки.

PrimaryScrollableTabRow(selectedTabIndex = 0) {
    Tab(selected = true, onClick = { /* Handle click */ }) {
        Text("Tab 1")
    }
}

Дополнительная панель вкладок без прокрутки.

SecondaryTabRow(selectedTabIndex = 0) {
    Tab(selected = true, onClick = { /* Handle click */ }) {
        Text("Tab 1")
    }
}

Дополнительная панель вкладок с прокруткой.

SecondaryScrollableTabRow(selectedTabIndex = 0) {
    Tab(selected = true, onClick = { /* Handle click */ }) {
        Text("Tab 1")
    }
}

Контейнер для отображения компонентов с поддержкой стилей, таких как elevation и фоны.

Surface(elevation = 4.dp, shape = RoundedCornerShape(8.dp)) {
    Text("Surface with elevation")
}

Элемент для отображения маленьких блоков текста или иконок.

Chip(onClick = { /* Handle click */ }) {
    Text("Chip")
}

Чип для дополнительных действий или помощи.

AssistChip(onClick = { /* Handle click */ }) {
    Text("Assist Chip")
}

Чип для фильтрации данных.

FilterChip(onClick = { /* Handle click */ }) {
    Text("Filter Chip")
}

Чип для ввода данных.

InputChip(onClick = { /* Handle click */ }) {
    Text("Input Chip")
}

Чип для предложений.

SuggestionChip(onClick = { /* Handle click */ }) {
    Text("Suggestion Chip")
}

Отображает небольшой значок или метку.

Badge {
    Text("New")
}

Компонент для прокрутки элементов в виде карусели.

Carousel(
    items = listOf("Item 1", "Item 2", "Item 3"),
    content = { item -> Text(item) }
)

Выбор даты.

DatePickerDialog(
    onDateSelected = { /* Handle date selection */ }
)

Выбор времени.

TimePickerDialog(
    onTimeSelected = { /* Handle time selection */ }
)

Боковая панель для навигации

NavigationRail {
    NavigationRailItem(
        icon = { Icon(Icons.Filled.Home, contentDescription = null) },
        label = { Text("Home") },
        selected = false,
        onClick = { /* Handle click */ }
    )
}

Панель для поиска.

SearchBar(onSearch = { /* Handle search */ }) {
    Text("Search")
}

Размещает элементы вертикально.

Column {
    Text("Item 1")
    Text("Item 2")
}

Размещает элементы горизонтально.

Row {
    Text("Item 1")
    Text("Item 2")
}

Контейнер, который накладывает элементы друг на друга.

Box {
    Text("First item")
    Text("Second item")
}

Располагает элементы в строках, которые автоматически переносятся на новую строку при переполнении ширины.

FlowRow {
    repeat(10) { index ->
        Text("Item $index")
    }
}

Аналог FlowRow, но с вертикальной ориентацией.

FlowColumn {
    repeat(10) { index ->
        Text("Item $index")
    }
}

Компонент для размещения элементов в строку с поддержкой контекстного управления.

ContextualFlowRow(
    context = /* Provide context */,
    modifier = Modifier.padding(8.dp)
) {
    items(/* List of items */) { item ->
        Text(text = item)
    }
}

Компонент для размещения элементов в колонку с поддержкой контекстного управления.

ContextualFlowColumn(
    context = /* Provide context */,
    modifier = Modifier.padding(8.dp)
) {
    items(/* List of items */) { item ->
        Text(text = item)
    }
}

Вертикальный список с возможностью прокрутки (аналог RecyclerView).

LazyColumn {
    items(10) { index ->
        Text("Item $index")
    }
}

Горизонтальный список с возможностью прокрутки.

LazyRow {
    items(10) { index ->
        Text("Item $index")
    }
}

Отображает элементы в виде сетки с возможностью прокрутки.

LazyVerticalGrid(cells = GridCells.Fixed(2)) {
    items(10) { index ->
        Text("Item $index")
    }
}

Добавить Header

LazyVerticalGrid(
    columns = GridCells.Fixed(count = 8),
) {
    item(
        span = { GridItemSpan(maxLineSpan) }
    ) {
        Text(
            text = "Header",
        )
    }

    items(list) { item ->
        ...            
    }
}

Прокручиваемая сетка с переменной высотой элементов.

LazyStaggeredGrid(columns = StaggeredGridCells.Fixed(2)) {
    items(100) { index ->
        Text("Item #$index")
    }
}

Структурный компонент для создания макетов с верхними панелями, навигацией, FAB и контентом.

Scaffold(
    topBar = { TopAppBar(title = { Text("AppBar Title") }) },
    floatingActionButton = { FloatingActionButton(onClick = { /* Действие */ }) { Text("+") } },
    content = { Text("Hello, Scaffold!") }
)

Специальный макет, где один элемент (фоновый) может быть скрыт или отображен позади другого контента.

BackdropScaffold(
    appBar = { TopAppBar(title = { Text("Backdrop Scaffold") }) },
    backLayerContent = { Text("Back Layer") },
    frontLayerContent = { Text("Front Layer") }
)

Пейджер для горизонтальной прокрутки страниц.

HorizontalPager(count = 5) { page ->
    Text("Page $page")
}

Пейджер для вертикальной прокрутки страниц (как и HorizontalPager, но с вертикальной ориентацией).

VerticalPager(count = 5) { page ->
    Text("Page $page")
}

Chain

ConstraintLayout {
    val (icon, text) = createRefs()
    createHorizontalChain(icon, text, chainStyle = ChainStyle.Packed)

    Icon(
        modifier = Modifier
            .constrainAs(icon) {
                width = Dimension.wrapContent
                height = Dimension.wrapContent
                start.linkTo(parent.start)
                top.linkTo(parent.top)
                end.linkTo(text.start)
                bottom.linkTo(parent.bottom)
            }
    )

    Text(
        modifier = Modifier
            .constrainAs(text) {
                width = Dimension.wrapContent
                height = Dimension.wrapContent
                start.linkTo(icon.end)
                top.linkTo(parent.top)
                end.linkTo(parent.end)
                bottom.linkTo(parent.bottom)
            }
            .padding(start = 8.dp)
    )
}

Flow

FlowRow {
    Text(
        text = "Text 1",
        modifier = Modifier.padding(end = 8.dp)
    )

		Text(
        text = "Text 2",
        modifier = Modifier.padding(end = 8.dp)
    )

    Text(
        text = "Text 3"
    )       
}

Контейнер, который может изменять свою компоновку в зависимости от доступных размеров.

BoxWithConstraints { constraints ->
    if (constraints.maxWidth < 600.dp) {
        // Компоновка для узкого экрана
        Column {
            Text("Узкий экран")
            // Дополнительные элементы
        }
    } else {
        // Компоновка для широкого экрана
        Row {
            Text("Широкий экран")
            // Дополнительные элементы
        }
    }
}

Интегрируется с NavController для навигации между экранами и поддерживает стандартные элементы интерфейса, такие как TopAppBar и BottomNavigation.

val navController = rememberNavController()
    
NavigationSuiteScaffold(
    navController = navController,
    topBar = { TopAppBar(title = { Text("MyApp") }) },
    bottomBar = {
        BottomNavigation {
            // Навигационные элементы
        }
    }
) { innerPadding ->
    NavHost(
        navController = navController,
        startDestination = "home",
        Modifier.padding(innerPadding)
    ) {
        composable("home") { HomeScreen(navController) }
        composable("details/{itemId}") { backStackEntry ->
            DetailsScreen(navController, itemId = backStackEntry.arguments?.getString("itemId"))
        }
    }
}

Управляет макетом, разделяя экран на две основные панели: список и детальную информацию.

ListDetailPaneScaffold(
    listContent = { innerPadding ->
        LazyColumn(
            Modifier.padding(innerPadding)
        ) {
            items(items = itemsList) { item ->
                ListItem(
                    modifier = Modifier.clickable { /* Отображаем детальную информацию */ },
                    text = { Text(item.title) }
                )
            }
        }
    },
    detailContent = { innerPadding ->
        // Отображение детальной информации о выбранном элементе
        DetailView(
            modifier = Modifier.padding(innerPadding),
            item = selectedItem
        )
    }
)

Создает интерфейсы с двумя панелями — основной и вспомогательной.

SupportingPaneScaffold(
    mainContent = { innerPadding ->
        // Основной контент
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Основной контент")
            // Дополнительные элементы
        }
    },
    supportingContent = { innerPadding ->
        // Вспомогательный контент
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Вспомогательный контент")
            // Дополнительные элементы
        }
    }
)

Обеспечивает структуру для приложений с навигацией между списком элементов и детализированным просмотром выбранного элемента.

val navigator = rememberListDetailPaneScaffoldNavigator<Any>()

NavigableListDetailPaneScaffold(
    navigator = navigator,
    listPane = {},   // панель списка
    detailPane = {}, // Панель деталей
)

Всплывающее окно для отображения временного контента поверх текущего интерфейса.

Popup {
    Text("Popup content")
}

Выпадающее меню для выбора из нескольких вариантов.

DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
    DropdownMenuItem(onClick = { /* Действие */ }) {
        Text("Option 1")
    }
    DropdownMenuItem(onClick = { /* Действие */ }) {
        Text("Option 2")
    }
}

Диалоговое окно для отображения сообщений и взаимодействия с пользователем.

AlertDialog(
    onDismissRequest = { /* Закрыть диалог */ },
    title = { Text("Title") },
    text = { Text("Dialog content goes here") },
    confirmButton = {
        Button(onClick = { /* Действие подтверждения */ }) {
            Text("OK")
        }
    }
)

Модальное нижнее окно, которое появляется снизу экрана и блокирует взаимодействие с остальными элементами, пока не будет закрыто.

@Composable
fun ExampleModalBottomSheet() {
    val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetState = sheetState,
        sheetContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Title")
                Button(onClick = { scope.launch { sheetState.hide() } }) {
                    Text("Close Bottom Sheet")
                }
            }
        }
    ) {
        Button(onClick = { scope.launch { sheetState.show() } }) {
            Text("Open Bottom Sheet")
        }
    }
}

Открывает листовое окно снизу для отображения контента.

ModalBottomSheetLayout(
    sheetContent = { Text("Bottom Sheet Content") },
    content = { Text("Main Content") }
)

Контейнер для отображения подсказок.

TooltipBox(tooltip = { Text("Tooltip") }) {
    Text("Hover me")
}

Простой контейнер для подсказок.

BasicTooltipBox(tooltip = { Text("Tooltip") }) {
    Text("Hover me")
}

Компонент для рисования 2D-графики.

Canvas(modifier = Modifier.size(100.dp)) {
    drawCircle(Color.Red)
}

Gradient

val gradientBrush = Brush.horizontalGradient(listOf(MaterialTheme.colorScheme.red, MaterialTheme.colorScheme.blue))

Canvas(
    modifier = Modifier,
    onDraw = { drawRect(gradientBrush) }
)

Компонент для плавного отображения или скрытия контента.

var visible by remember { mutableStateOf(true) }
AnimatedVisibility(visible = visible) {
    Text("Animated Content")
}

Компонент для анимации плавной смены контента.

Crossfade(targetState = selectedScreen) { screen ->
    when (screen) {
        Screen.Home -> HomeScreen()
        Screen.Profile -> ProfileScreen()
    }
}

Контейнер для отображения placeholder-заполнителя (например, для состояния загрузки).

Placeholder(visible = true, modifier = Modifier.size(100.dp))

Позволяет встроить классический Android View в Compose.

AndroidView(factory = { context -> TextView(context).apply { text = "Hello, View!" } })

Всплывающее уведомление в нижней части экрана.

class MyViewModel: ViewModel() {

    var isSnackbarShowed: Boolean by mutableStateOf(false)

		fun showSnackbarMessage() {
			  isSnackbarShowed = true
		}

    fun hideSnackbarMessage() {
        isSnackbarShowed = false
    }
}

@Composable
fun Composable(
		viewModel: MyViewModel = hiltViewModel()
) {
		val scope = rememberCoroutineScope()
    val snackbarHostState = remember { SnackbarHostState() }
		val isSnackbarShowed = viewModel.isSnackbarShowed

		val onShowSnackbar: (String) -> Unit = { message ->
        scope.launch {
            snackbarHostState.currentSnackbarData?.dismiss()
						val snackbarResult = snackbarHostState.showSnackbar(
                message = message,
                duration = SnackbarDuration.Short
            )
            if (snackbarResult == SnackbarResult.Dismissed) {
                viewModel.hideSnackbarMessage()
            }
        }
    }

		if (isSnackbarShowed) {
        onShowSnackbar(stringResource(R.string.message))
    }
}

Scaffold(
		snackbarHost = {
        SnackbarHost(
            hostState = snackbarHostState
        )
    }
) { innerPadding -> 
    
}

val density: Density = LocalDensity.current

var columnHeightPx: Float by remember { mutableStateOf(0F) }
var columnHeightDp: Dp by remember { mutableStateOf(0.dp) }

Box(
    modifier = Modifier
        .onGloballyPositioned { layoutCoordinates ->
            columnHeightPx = layoutCoordinates.size.height.toFloat()
            columnHeightDp = with(density) { layoutCoordinates.size.height.toDp() }
        }
)

1. Лагает список LazyList. Что будем делать?

2. Как сделать отступ у Box?

3. Какие основные Layout есть в Compose?

   Box Row Column