Firebase查询FoodProduct优化：实现滚动分页加载解决性能问题

1. 重构Firebase查询函数，支持分页搜索 #

原查询仅返回匹配关键词的单个产品，现在调整为支持前缀匹配的分页查询（Firebase实时数据库原生推荐的分页方案）：

fun searchProductsByName(
    query: String,
    pageSize: Int = 10,
    lastProductName: String? = null,
    callback: (List<FoodProduct>, Boolean) -> Unit // 返回结果列表+是否还有更多数据
) {
    val database = FirebaseDatabase.getInstance("")
    val reference = database.getReference("FoodProducts")

    // 前缀匹配查询：匹配所有以关键词开头的产品
    var firebaseQuery = reference.orderByChild("name")
        .startAt(query)
        .endAt("$query\uf8ff") // \uf8ff是Unicode高值字符，用于覆盖所有前缀匹配项

    // 若存在上一页最后一个产品，从该产品之后开始查询
    lastProductName?.let {
        firebaseQuery = firebaseQuery.startAfter(it)
    }

    // 多请求1条数据，用于判断是否还有下一页
    firebaseQuery.limitToFirst(pageSize + 1)
        .addListenerForSingleValueEvent(object : ValueEventListener {
            override fun onDataChange(dataSnapshot: DataSnapshot) {
                val products = mutableListOf<FoodProduct>()
                dataSnapshot.children.forEach { snapshot ->
                    snapshot.getValue(FoodProduct::class.java)?.let { products.add(it) }
                }

                // 判断是否还有更多数据：返回数量超过页容量则说明有下一页
                val hasMore = products.size > pageSize
                val result = if (hasMore) products.take(pageSize) else products
                callback(result, hasMore)
            }

            override fun onCancelled(databaseError: DatabaseError) {
                callback(emptyList(), false)
            }
        })
}

注：如果需要包含关键词的模糊搜索（而非仅前缀匹配），Firebase实时数据库原生不支持，需额外处理（如通过云函数构建索引，或切换到Firestore）。上述代码为实时数据库最优的前缀分页搜索方案。

2. 前端Jetpack Compose实现滚动加载 #

新增分页状态变量，监听列表滚动状态触发下一页加载：

var searchQuery by remember { mutableStateOf("") }
var searchResults by remember { mutableStateOf<List<FoodProduct>>(emptyList()) }
var lastProductName by remember { mutableStateOf<String?>(null) }
var isLoading by remember { mutableStateOf(false) }
var hasMore by remember { mutableStateOf(true) }
val lazyListState = rememberLazyListState()

// 搜索关键词变化时重置分页状态
LaunchedEffect(searchQuery) {
    searchResults = emptyList()
    lastProductName = null
    hasMore = true
    isLoading = false

    if (searchQuery.isNotBlank()) {
        isLoading = true
        searchProductsByName(searchQuery) { products, more ->
            searchResults = products
            lastProductName = products.lastOrNull()?.name
            hasMore = more
            isLoading = false
        }
    }
}

// 监听滚动到底部，触发下一页加载
LaunchedEffect(lazyListState) {
    snapshotFlow { 
        val lastVisibleItem = lazyListState.layoutInfo.visibleItemsInfo.lastOrNull()
        lastVisibleItem?.index == searchResults.size - 1 && lazyListState.isScrollInProgress
    }
    .distinctUntilChanged()
    .collect { shouldLoad ->
        if (shouldLoad && !isLoading && hasMore) {
            loadNextPage()
        }
    }
}

// 加载下一页的逻辑
fun loadNextPage() {
    if (!isLoading && hasMore && searchQuery.isNotBlank()) {
        isLoading = true
        searchProductsByName(searchQuery, lastProductName = lastProductName) { products, more ->
            searchResults += products
            lastProductName = products.lastOrNull()?.name
            hasMore = more
            isLoading = false
        }
    }
}

LazyColumn(
    modifier = Modifier.weight(1f),
    state = lazyListState
) {
    items(searchResults) { product ->
        FoodProductItem(product = product, navController = navController)
    }

    // 加载中提示
    if (isLoading) {
        item {
            CircularProgressIndicator(modifier = Modifier.fillMaxWidth().padding(16.dp))
        }
    }
}

3. 关键优化点说明 #

• 游标分页：Firebase实时数据库不支持页码分页，必须通过startAfter配合上一页最后一条数据的字段值（这里用name）实现分页，避免数据重复或遗漏。
• 预加载判断：请求pageSize+1条数据，通过返回数量判断是否还有下一页，无需额外查询验证。
• 状态锁控制：用isLoading防止重复触发加载请求，hasMore标记是否还有数据可加载，减少无效请求。
• 搜索重置：关键词变化时清空现有结果、重置分页状态，重新加载第一页数据。

内容的提问来源于stack exchange，提问作者Tevel