Jetpack Compose 中 Flow 收集详解 —— 新手指南

引言： Jetpack Compose 提供了多种方式来收集和响应 Kotlin Flow 的数据流，本文将详细介绍各种收集方法及其适用场景。

可带着以下问题阅读本文：

• 生命周期感知：当APP进入后台时，收集是否应该停止？
• 使用场景：当前场景是在收集状态还是处理一次性事件？
• 复杂度：是否需要自定义逻辑或多个Flow？
• 性能：如何优化资源使用？

1. 基础收集方式

1.1 collectAsStateWithLifecycle（推荐）

这是目前最推荐的收集方式，具有生命周期感知能力：

import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.compose.runtime.Composable

@Composable
fun UserProfile(viewModel: UserViewModel) {
    // 自动感知生命周期，在后台时停止收集
    val userState by viewModel.userFlow.collectAsStateWithLifecycle(initialValue = null)
    
    when (val state = userState) {
        is Loaded -> UserContent(state.data)
        is Loading -> LoadingIndicator()
        is Error -> ErrorMessage(state.message)
        null -> {}
    }
}

1.2 collectAsState

简单的状态收集，适用于非生命周期感知的场景：

import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.Composable

@Composable
fun CounterScreen(viewModel: CounterViewModel) {
    val count by viewModel.counterFlow.collectAsState(initial = 0)
    
    Text(text = "Count: $count")
}

2. LaunchedEffect 收集

适用于需要启动协程并执行副作用的场景：

2.1 基本用法

import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.Composable

@Composable
fun DataScreen(viewModel: DataViewModel) {
    var data by remember { mutableStateOf<String?>(null) }
    var error by remember { mutableStateOf<String?>(null) }
    
    LaunchedEffect(Unit) {
        // 在 Composable 进入组合时启动收集
        viewModel.dataFlow
            .catch { e -> error = e.message }
            .collect { newData ->
                data = newData
            }
    }
    
    if (error != null) {
        ErrorView(error!!)
    } else {
        DataView(data)
    }
}

2.2 带参数的 LaunchedEffect

@Composable
fun UserDetailScreen(userId: String, viewModel: UserViewModel) {
    var user by remember { mutableStateOf<User?>(null) }
    
    // 当 userId 变化时重新启动收集
    LaunchedEffect(userId) {
        viewModel.getUserFlow(userId).collect { userData ->
            user = userData
        }
    }
    
    // UI 内容
}

3. Flow 操作符与 Compose 结合

3.1 结合状态持有器

@Composable
fun SearchScreen(viewModel: SearchViewModel) {
    var searchQuery by remember { mutableStateOf("") }
    val searchResults by searchQuery
        .debounce(300) // 防抖
        .flatMapLatest { query ->
            if (query.isBlank()) {
                flowOf(emptyList())
            } else {
                viewModel.search(query)
            }
        }
        .collectAsState(initial = emptyList())
    
    Column {
        SearchBar(
            value = searchQuery,
            onValueChange = { searchQuery = it }
        )
        SearchResultsList(results = searchResults)
    }
}

3.2 处理多个 Flow

@Composable
fun DashboardScreen(
    userFlow: Flow<User>,
    notificationsFlow: Flow<List<Notification>>,
    statsFlow: Flow<Stats>
) {
    val user by userFlow.collectAsStateWithLifecycle(initialValue = null)
    val notifications by notificationsFlow.collectAsStateWithLifecycle(initialValue = emptyList())
    val stats by statsFlow.collectAsStateWithLifecycle(initialValue = Stats())
    
    // 使用组合状态
    val isLoading = remember(user, notifications, stats) {
        user == null || stats.isEmpty()
    }
    
    if (isLoading) {
        LoadingIndicator()
    } else {
        DashboardContent(user!!, notifications, stats)
    }
}

4. produceState 收集

适用于将非 Compose 状态转换为 Compose 状态：

import androidx.compose.runtime.produceState

@Composable
fun TimerScreen() {
    val time = produceState(initialValue = 0) {
        // 启动协程
        var seconds = 0
        while (true) {
            delay(1000)
            seconds++
            value = seconds
        }
        // 当 Composable 离开组合时自动取消
    }
    
    Text(text = "Time: ${time.value} seconds")
}

5. Flow 收集的最佳实践

5.1 状态封装

sealed interface DataState<out T> {
    object Loading : DataState<Nothing>
    data class Success<T>(val data: T) : DataState<T>
    data class Error(val message: String) : DataState<Nothing>
}

@Composable
fun <T> Flow<T>.collectAsStateWithLifecycle(
    initial: DataState<T> = DataState.Loading
): State<DataState<T>> {
    return this
        .map { DataState.Success(it) }
        .catch { emit(DataState.Error(it.message ?: "Unknown error")) }
        .collectAsStateWithLifecycle(initialValue = initial)
}

5.2 防止重复收集

@Composable
fun UserProfile(userId: String) {
    val viewModel: UserViewModel = viewModel(
        factory = UserViewModel.provideFactory(userId)
    )
    
    // 使用 key 防止重复创建
    val userState by viewModel.userFlow.collectAsStateWithLifecycle()
    
    // 使用 derivedStateOf 进行转换
    val displayName = remember(userState) {
        derivedStateOf {
            userState?.let { "${it.firstName} ${it.lastName}" } ?: ""
        }
    }
}

5.3 处理背压（Backpressure）

@Composable
fun HighFrequencyUpdates() {
    val updates by viewModel.highFrequencyFlow
        .conflate() // 合并快速发射的值
        .collectAsStateWithLifecycle(initialValue = 0)
    
    // 或者使用 sample 取样
    val sampledUpdates by viewModel.highFrequencyFlow
        .sample(100) // 每 100ms 取样一次
        .collectAsStateWithLifecycle(initialValue = 0)
}

6. 测试 Flow 收集

class UserScreenTest {
    @Test
    fun testFlowCollection() = runTest {
        val fakeViewModel = FakeUserViewModel()
        composeTestRule.setContent {
            UserScreen(viewModel = fakeViewModel)
        }
        
        // 验证初始状态
        composeTestRule.onNodeWithText("Loading...").assertExists()
        
        // 发射测试数据
        fakeViewModel.testUserFlow.emit(User("John", "Doe"))
        
        // 验证更新后的 UI
        composeTestRule.onNodeWithText("John Doe").assertExists()
    }
}

// 测试用的 ViewModel
class FakeUserViewModel : UserViewModel() {
    val testUserFlow = MutableStateFlow<User?>(null)
    
    override val userFlow: Flow<User?> = testUserFlow
}

7. 性能注意事项

1. 避免过度重组 ：使用 remember 和 derivedStateOf 减少不必要的重组
2. 生命周期感知 ：始终使用 collectAsStateWithLifecycle 除非有特殊需求
3. 取消收集：确保在 Composable 离开组合时取消 Flow 收集
4. 状态最小化：只收集需要的数据，避免收集不必要的信息
5. 流量控制：对于高频更新的 Flow，使用合适的背压策略

总结

方法	适用场景	生命周期感知	推荐度
collectAsStateWithLifecycle	大多数 UI 状态收集	✅	⭐⭐⭐⭐⭐
collectAsState	简单状态，非生命周期敏感	❌	⭐⭐⭐
LaunchedEffect	副作用操作，一次性事件	✅	⭐⭐⭐⭐
produceState	将外部状态转换为 Compose 状态	✅	⭐⭐⭐

选择合适的方法取决于具体场景，但通常推荐使用 collectAsStateWithLifecycle 作为默认选择，因为它提供了最好的生命周期管理和性能优化。