Что такое @Composable функция?

Что такое @Composable функция?

@Composable функция — это фундаментальная строительная единица UI в современных Android-приложениях, использующих фреймворк Jetpack Compose. Это функция, аннотированная @Composable, которая описывает часть пользовательского интерфейса декларативным способом, преобразуя данные в UI-дерево.

Ключевые характеристики и принципы работы

1. Декларативный подход: Вместо императивных команд (например, findViewById(), setText()) вы описываете, как должен выглядеть UI при заданном состоянии. Compose автоматически обновляет UI при изменении этого состояния.

   @Composable
   fun Greeting(name: String) {
       // Декларативно описываем: должен отобразиться Text с данным содержимым
       Text(text = "Привет, $name!")
   }
   

2. Функции, а не объекты: UI строится путем вызова таких функций, а не через наследование от классов View. Это делает код более модульным, повторно используемым и простым для тестирования.

3. Идемпотентность и безопасность: Composable-функции могут запускаться многократно в любом порядке, и они должны быть свободны от побочных эффектов при описании UI. Они получают все данные через параметры (принцип явных зависимостей) или через remember и состояние.

   @Composable
   fun Counter() {
       // Состояние запоминается и не сбрасывается при каждом рекомпозиции
       var count by remember { mutableStateOf(0) }
   
       Button(onClick = { count++ }) {
           Text("Кликов: $count")
       }
   }
   

4. Интеллектуальная рекомпозиция: Система Compose отслеживает, какие функции "подписываются" на какие данные состояния. При изменении состояния рекомпозируются только те функции, которые зависят от изменившихся данных, а не все дерево UI. Это достигается за счет сравнения слотов (slot table) между вызовами.

5. Структурирование по принципу композиции: Вы создаете сложные интерфейсы, комбинируя простые Composable-функции. Вместо наследования используется композиция.

   @Composable
   fun UserProfile(user: User) {
       Column {
           // Композиция нескольких простых компонентов
           ProfileHeader(user.name, user.avatarUrl)
           ProfileDetails(user.email, user.bio)
           ActionsFooter()
       }
   }
   

Важные аспекты для понимания

• Контекст рекомпозиции: Функция выполняется внутри контекста, предоставляемого Runtime Compose. Этот контекст содержит необходимые инструменты для управления состоянием, жизненным циклом и структурой UI.
• Фазы работы Compose:

    1. **Composition** (Композиция) — определение *что* отобразить путем вызова Composable-функций.
    2. **Layout** (Макетирование) — определение *где* разместить элементы.
    3. **Drawing** (Рисование) — отрисовка на экране.

• Ограничения: Внутри Composable-функций нельзя напрямую обращаться к императивным API Android View или выполнять долгие операции (сетевые запросы, чтение БД). Для этого используются side-effects API (например, LaunchedEffect, DisposableEffect).

Пример комплексного использования

@Composable
fun NewsArticle(
    article: Article,
    onBookmarkClick: () -> Unit,
    isBookmarked: Boolean
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            // Чтение конфигурации через CompositionLocal
            val typography = MaterialTheme.typography
            
            Text(
                text = article.title,
                style = typography.h6,
                color = MaterialTheme.colors.primary
            )
            
            Spacer(modifier = Modifier.height(8.dp))
            
            Text(
                text = article.summary,
                style = typography.body2
            )
            
            // Состояние, управляющее отображением
            var expanded by remember { mutableStateOf(false) }
            
            if (expanded) {
                Text(
                    text = article.fullText,
                    modifier = Modifier.clickable { expanded = false }
                )
            }
            
            // Композиция с обработкой событий
            Row {
                IconButton(onClick = onBookmarkClick) {
                    Icon(
                        imageVector = if (isBookmarked) Icons.Filled.Bookmark else Icons.Outlined.Bookmark,
                        contentDescription = "Bookmark"
                    )
                }
                Button(onClick = { expanded = true }) {
                    Text("Читать далее")
                }
            }
        }
    }
}

@Composable функция — это революционный подход к построению UI в Android, который устраняет множество проблем традиционной View-системы: упрощает код, повышает производительность за счет умной рекомпозиции и делает интерфейсы более предсказуемыми за счет одностороннего потока данных.