Site icon AppTractor

10 лучших шаблонов Jetpack Compose, которые должен знать каждый Android-разработчик

AppTractor

Jetpack Compose — это как наконец-то получить качественную эспрессо-машину после многих лет растворимого кофе с XML-вёрсткой. Но с большой мощью приходит… искушение написать действительно хаотичный UI-код. Не волнуйтесь. Я тоже через это проходил.

В этой статье мы рассмотрим 10 самых важных шаблонов, которые помогут сделать ваш код Compose чище, удобнее в поддержке и масштабируемее. Независимо от того, являетесь ли вы поклонником Compose или всё ещё пытаетесь понять, что рекомпозиции — это не какие-то штуки из мультивселенной Marvel, эти шаблоны облегчат вам жизнь.

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

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

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

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

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

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

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

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 композабл

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

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

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

6. Scaffold для макетов

Используйте Scaffold для структурирования экранов (TopBar, BottomNav, FAB и т.д.)

Scaffold(
    topBar = { TopAppBar(title = { Text("Hello") }) },
    floatingActionButton = { FloatingActionButton(onClick = { }) { Icon(Icons.Default.Add, null) } }
) {
    // content
}

Это похоже на ConstraintLayout, но не заставит вас плакать.

7. DerivedStateOf для производной UI-логики

val isFormValid by remember {
    derivedStateOf { email.isNotEmpty() && password.length >= 8 }
}

Экономит рекомпозиции. Спасает жизни. Ну, может, и не жизни, но рассудок точно.

8. Помните о Saveable

val name by rememberSaveable { mutableStateOf("") }

Переживает изменения конфигурации. В отличие от вашего рассудка в течение недели дедлайна.

9. Ключевые эффекты с LaunchedEffect

LaunchedEffect(userId) {
    viewModel.loadUser(userId)
}

Запускает побочные эффекты только при изменении ключа. Не каждая рекомпозиция похожа на вредоносную корутину.

10. Кастомные модификаторы для согласованности

fun Modifier.defaultPadding() = padding(16.dp)

Избегает магических чисел повсюду. Кастомные модификаторы делают ваш код пользовательского интерфейса DRY и менее… влажным?

Итоги

Jetpack Compose даёт вам чистый холст и целый вагон кистей. Эти шаблоны помогут вам создавать шедевры, а не спагетти.

Счастливого творчества! И помните: если экран слишком часто пересобирается, это, вероятно, ваша вина.

Источник

Exit mobile version