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 = { /* Handle click */ }
) {
    Text(text = "Button")
}

Preview

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

TextButton(
    onClick = { /* Handle click */ }
) {
    Text(text = "Text Button")
}

Preview

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

OutlinedButton(
    onClick = { /* Handle click */ }
) {
    Text(text = "Outlined Button")
}

Preview

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

IconButton(
    onClick = { /* Handle click */ }
) {
    Icon(
        imageVector = Icons.Default.Favorite,
        contentDescription = "Favorite"
    )
}

Preview

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

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

Preview

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

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

Preview

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

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

Preview

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

ElevatedButton(
    onClick = { /* Handle click */ }
) {
    Text(text = "Elevated Button")
}

Preview

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

FilledTonalButton(
    onClick = { /* Handle click */ }
) {
    Text(text = "Filled Tonal Button")
}

Preview

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

var isChecked by remember { mutableStateOf(false) }

IconToggleButton(
    checked = isChecked,
    onCheckedChange = { isChecked = it }
) {
    val icon = if (isChecked) Icons.Default.Favorite else Icons.Default.FavoriteBorder
    val tint = if (isChecked) Color.Red else Color.Gray

    Icon(
        imageVector = icon,
        contentDescription = if (isChecked) "Удалить из избранного" else "Добавить в избранное",
        tint = tint
    )
}

Preview

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

var isChecked by remember { mutableStateOf(false) }

FilledIconToggleButton(
    checked = isChecked,
    onCheckedChange = { isChecked = it }
) {
    val icon = if (isChecked) Icons.Default.Star else Icons.Default.StarBorder
    val tint = if (isChecked) Color.Yellow else Color.Gray

    Icon(
        imageVector = icon,
        contentDescription = if (isChecked) "Удалить из избранного" else "Добавить в избранное",
        tint = tint
    )
}

Preview

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

var isChecked by remember { mutableStateOf(false) }

FilledTonalIconToggleButton(
    checked = isChecked,
    onCheckedChange = { isChecked = it }
) {
    val icon = if (isChecked) Icons.Default.Star else Icons.Default.StarBorder
    val tint = if (isChecked) Color.Yellow else Color.Gray

    Icon(
        imageVector = icon,
        contentDescription = if (isChecked) "Удалить из избранного" else "Добавить в избранное",
        tint = tint
    )
}

Preview

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

var isChecked by remember { mutableStateOf(false) }

OutlinedIconToggleButton(
    checked = isChecked,
    onCheckedChange = { isChecked = it }
) {
    val icon = if (isChecked) Icons.Default.Star else Icons.Default.StarBorder
    val tint = if (isChecked) Color.Yellow else Color.Gray

    Icon(
        imageVector = icon,
        contentDescription = if (isChecked) "Удалить из избранного" else "Добавить в избранное",
        tint = tint
    )
}

Preview

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

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("Text") }

TextField(
    value = text,
    onValueChange = { newText -> text = newText },
    modifier = Modifier.fillMaxWidth(0.8F),
    textStyle = TextStyle(color = Color.Black, fontSize = 16.sp),
    label = { Text(text = "Введите текст") },
    placeholder = { Text(text = "Текст") }
)

Preview

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
)

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()
)

Базовый компонент для ввода текста в Compose, предоставляющий большую гибкость и настраиваемость по сравнению с TextField. Не содержит встроенного оформления и анимаций, таких как подсказки, рамки или иконки, что позволяет разработчику полностью контролировать его внешний вид и поведение. BasicTextField подходит для создания кастомных полей ввода, где внешний вид и взаимодействие требуют более тонкой настройки.

var text by remember { mutableStateOf("Text") }

BasicTextField(
    value = text,
    onValueChange = { newText -> text = newText },
    modifier = Modifier.fillMaxWidth(0.8F),
    textStyle = TextStyle(color = Color.Black, fontSize = 36.sp),
    cursorBrush = SolidColor(Color.Blue)
)

Preview

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

var text by remember { mutableStateOf("Text") }

OutlinedTextField(
    value = text,
    onValueChange = { newText -> text = newText },
    modifier = Modifier.fillMaxWidth(0.8F),
    textStyle = TextStyle(color = Color.Black, fontSize = 16.sp),
    label = { Text(text = "Введите текст") },
    placeholder = { Text(text = "Текст") }
)

Preview

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

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)
    }
}

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

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

LazyColumn {
    item {
        Text(text = "Заголовок")
    }
    item {
        Text(text = "Первый элемент")
    }
}

LazyColumn {
    items(listOf("Первый", "Второй", "Третий")) { item ->
        Text(text = item)
    }
}

LazyColumn {
    itemsIndexed(listOf("Первый", "Второй", "Третий")) { index, item ->
        Text(text = "$index: $item")
    }
}

LazyColumn {
    stickyHeader {
        Text(text = "Заголовок раздела", style = MaterialTheme.typography.h6)
    }
    items(listOf("Элемент 1", "Элемент 2", "Элемент 3")) { item ->
        Text(text = item)
    }
}

data class User(val id: String, val name: String)

val users = listOf(
    User("1", "Alice"),
    User("2", "Bob"),
    User("3", "Charlie")
)

LazyColumn {
    items(users, key = { it.id }) { user ->
        Text(text = user.name)
    }
}

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

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")
}