Как отобразить event в UI через Compose Desktop

Отображение событий в UI через Compose Desktop

В Compose Desktop, как и в Compose для Android, отображение событий в UI основано на реактивной парадигме и управлении состоянием. Основной подход — использование MutableState и наблюдаемых состояний для автоматического обновления UI при изменении данных.

Ключевые концепции

1. Состояние (State): Данные, которые могут меняться со временем и влияют на внешний вид UI.
2. Рекомпозиция: Процесс перерисовки Compose-функций при изменении состояния.
3. Наблюдаемые объекты: Например, MutableState<T>, LiveData, StateFlow (в Kotlin Multiplatform).

Основные способы отображения событий

1. Использование mutableStateOf

Наиболее простой способ — создать MutableState объект и наблюдать за его изменениями:

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun EventDisplayExample() {
    var eventMessage by remember { mutableStateOf("Жду события...") }
    var eventCount by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = eventMessage,
            style = MaterialTheme.typography.h6
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        Text(
            text = "Событий: $eventCount",
            style = MaterialTheme.typography.body1
        )
        
        Spacer(modifier = Modifier.height(24.dp))
        
        Button(onClick = {
            eventMessage = "Событие произошло! Время: ${System.currentTimeMillis()}"
            eventCount++
        }) {
            Text("Имитировать событие")
        }
    }
}

@Preview
@Composable
fun PreviewEventDisplayExample() {
    EventDisplayExample()
}

2. Использование ViewModel с StateFlow (для более сложных случаев)

Для отделения бизнес-логики от UI можно использовать ViewModel:

import androidx.compose.runtime.*
import kotlinx.coroutines.flow.*
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch

class EventViewModel {
    private val _events = MutableStateFlow<List<String>>(emptyList())
    val events: StateFlow<List<String>> = _events.asStateFlow()
    
    fun addEvent(event: String) {
        _events.update { currentEvents ->
            currentEvents + event
        }
    }
}

@Composable
fun EventListScreen(viewModel: EventViewModel = remember { EventViewModel() }) {
    val events by viewModel.events.collectAsState()
    val scope = rememberCoroutineScope()
    
    Column(modifier = Modifier.padding(16.dp)) {
        Button(onClick = {
            scope.launch {
                viewModel.addEvent("Событие от ${System.currentTimeMillis()}")
            }
        }) {
            Text("Добавить событие")
        }
        
        LazyColumn {
            items(events.size) { index ->
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(4.dp)
                ) {
                    Text(
                        text = events[index],
                        modifier = Modifier.padding(8.dp)
                    )
                }
            }
        }
    }
}

3. Обработка событий от внешних источников

Для событий извне (например, из сетевых запросов или системных событий):

import androidx.compose.runtime.*
import kotlinx.coroutines.*
import kotlinx.coroutines.flow.*
import java.util.*

@Composable
fun ExternalEventExample() {
    var externalEvent by remember { mutableStateOf<String?>(null) }
    
    // Запускаем сбор событий при инициализации
    LaunchedEffect(Unit) {
        while (true) {
            delay(3000) // Имитация внешних событий каждые 3 секунды
            externalEvent = "Внешнее событие: ${Date()}"
        }
    }
    
    Column {
        externalEvent?.let { event ->
            AlertDialog(
                onDismissRequest = { externalEvent = null },
                title = { Text("Новое событие") },
                text = { Text(event) },
                confirmButton = {
                    Button(onClick = { externalEvent = null }) {
                        Text("OK")
                    }
                }
            )
        }
        
        Text("Ожидание внешних событий...")
    }
}

Практические рекомендации

• Используйте remember для сохранения состояния между рекомпозициями
• Для сложной логики разделяйте ответственность между UI и ViewModel
• Обрабатывайте асинхронные события через LaunchedEffect и корутины
• Тестируйте обновления UI с разными типами событий
• Оптимизируйте рекомпозицию с помощью derivedStateOf для вычисляемых значений

Пример с обработкой ошибок

@Composable
fun EventWithErrorHandling() {
    var eventState by remember { mutableStateOf<Result<String>>(Result.success("Начальное состояние")) }
    
    Column {
        when (val state = eventState) {
            is Result.Success -> Text("Успех: ${state.value}")
            is Result.Failure -> Text("Ошибка: ${state.exception.message}")
        }
        
        Button(onClick = {
            eventState = if (Random().nextBoolean()) {
                Result.success("Случайное событие: ${System.currentTimeMillis()}")
            } else {
                Result.failure(RuntimeException("Имитация ошибки"))
            }
        }) {
            Text("Генерировать событие")
        }
    }
}

В Compose Desktop подходы практически идентичны Android Compose, но с учетом особенностей десктопной платформы (например, отсутствие LifecycleOwner, но наличие аналогичных механизмов управления жизненным циклом окна).