🤫 5 лучших шаблонов Jetpack Compose

Рассмотрим 5 самых важных шаблонов, которые помогут сделать ваш код Compose чище, удобнее в поддержке и масштабируемее.

1️⃣ Подъем состояния

Шаблон: перемещение состояния вверх к родительскому composable и передача его вниз.

@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
    Button(onClick = onIncrement) {
        Text("Clicked $count times")
    }
}

Зачем: делает ваш пользовательский интерфейс stateless и упрощает тестирование. Меньше побочных эффектов = меньше отладки = больше сна.

2️⃣ Однонаправленный поток данных (UDF)

Паттерн: данные текут вниз, события текут вверх.

• ViewModel предоставляет состояние
• Композабл объекты отслеживают состояние
• События пользовательского интерфейса всплывают через колбеки

Думайте об этом как о родительском контроле: вы даёте инструкции, и хаос (то есть события) находит путь обратно.

3️⃣ Слотовые API

Паттерн: принимает содержимое в качестве параметров (как дочерние элементы в React).

@Composable
fun FancyCard(content: @Composable () -> Unit) {
    Card {
        content()
    }
}

Способствует повторному использованию. Ваши проекты будут вам благодарны, и ваши коллеги тоже, возможно, тоже.

4️⃣ Интеграция ViewModel + StateFlow

Предоставьте доступ к состоянию с помощью StateFlow и соберите его в Composable.

val uiState by viewModel.stateFlow.collectAsState()

Избегайте LiveData, если только вы не создаёте музей Compose.

5️⃣ Stateless vs Stateful композабл

Разделите ваши композабл:

• Stateless: только пользовательский интерфейс
• Stateful: управление логикой

@Composable
fun PasswordInputField(password: String, onChange: (String) -> Unit) { /*...*/ }

Более чёткое разделение, более удобный предварительный просмотр и меньше сюрпризов.

Что бы вы добавили в этот список? Пишите в комментариях 💬

🐸 Библиотека мобильного разработчика

#буст