滑動時如何不刷新屏幕

Question

我正在開發一個應用程序，其中顯示土豆列表，從 Firestore 檢索數據。

我添加了一個滑動動作來刷新數據。 使用我在下面顯示的代碼，數據更新正常，調用 Firestore 並更新顯示新值以防它們存在，或停止顯示不再存在的值。

問題是當我滑動土豆列表屏幕時仍然是空白的，當對 Firestore 的調用結束時，它們會再次顯示。 也就是說，屏幕會在幾秒鍾內變為空白。

有沒有可能這不會發生？ 這個效果有點丑

視圖模型：

@HiltViewModel
class PotatoesViewModel @Inject constructor(
    private val getPotatoesDataUseCase: GetPotatoesData
) : ViewModel() {

    private val _state = mutableStateOf(PotatoesState())
    val state: State<PotatoesState> = _state
    private val _isRefreshing = MutableStateFlow(false)
    val isRefreshing: StateFlow<Boolean>
        get() = _isRefreshing.asStateFlow()

    init {
        getPotatoes()
    }

    private fun getPotatoes() {

        getPotatoesDataUseCase().onEach { result ->
            when (result) {
                is Resource.Success -> {
                    _state.value = PotatoesState(potatoes = result.data?.potatoes ?: emptyList())
                }
                is Resource.Error   -> {
                    _state.value = PotatoesState(
                        error = result.message ?: "An unexpected error occurred"
                    )
                }
                is Resource.Loading -> {
                    _state.value = PotatoesState(isLoading = true)
                }
            }
        }.launchIn(viewModelScope)
    }

    fun refresh() {
        viewModelScope.launch {
            _isRefreshing.emit(true)
            getIncidents()
            _isRefreshing.emit(false)
        }
    }
}

屏幕：

@Composable
fun PotatoesDataScreen(
    navController: NavController,
    viewModel: PotatoesViewModel = hiltViewModel()
) {
    val state = viewModel.state.value
    val isRefreshing by viewModel.isRefreshing.collectAsState()

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        stringResource(R.string.app_name),
                        fontWeight = FontWeight.Bold
                    )
                },
                backgroundColor = Primary,
                contentColor = Color.White
            )
        },

        content = {
            Box(modifier = Modifier.fillMaxSize()) {

                SwipeRefresh(
                    state = rememberSwipeRefreshState(isRefreshing),
                    onRefresh = { viewModel.refresh() }
                ) {

                    LazyColumn(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(vertical = 8.dp)
                    ) {
                        items(state.potatoes) { potato ->
                            PotatoCard(
                                potato = potato
                            )
                        }
                    }
                }
            }
        }
    )

}

馬鈴薯狀態：

data class PotatoesState(
    val isLoading: Boolean = false,
    val potatoes: List<Potato> = emptyList(),
    val error: String = ""
)

Answer 1

當列表屏幕為空白時，這是調用 Api 的時間。 當您撥打電話但仍未收到回復時，這也是列表為空白的情況。 每次您將PotatoesState的新 Object 傳遞給mutableState時：

1. 收到回復，
2. 得到一個錯誤，（用Potatoes = emptyList() ）
3. 或 state 正在加載。 （ Potatoes = emptyList() ）

UI 會根據您命名為_state的MutableState進行更新。

如果您想在收到新的響應之前保持相同的數據，那么您需要更新當前的state.value: MutableState<PotatoesState> object 只有在您收到新的響應時（也稱為is Resource.success ）。

或者，您可以實現一個加載微調器，並在您啟動 Api 請求時顯示它，直到isLoading為false 。