在jetpack compose的下一个屏幕中加载微调器无法正常工作

Question

我是Compose Navigation的新手。 我有Button ，当我单击时，我在Viewmodel中调用该函数并使用StateFlow触发加载事件。 所以我通过导航调用下一个屏幕并调用加载微调器。 我使用delay(5000)在获取数据之前显示更多微调器，但在加载数据后微调器正在加载。 有人可以指导我。

MainActivityViewModel.kt

class MainActivityViewModel(private val resultRepository: ResultRepository) : ViewModel() {

    val stateResultFetchState = MutableStateFlow<ResultFetchState>(ResultFetchState.OnEmpty)

    fun getSportResult() {
        viewModelScope.launch {
            stateResultFetchState.value = ResultFetchState.IsLoading
            val result = resultRepository.getSportResult()
            delay(5000)
            result.handleResult(
                onSuccess = { response ->
                    if (response != null) {
                        stateResultFetchState.value = ResultFetchState.OnSuccess(response)
                    } else {
                        stateResultFetchState.value = ResultFetchState.OnEmpty
                    }
                },
                onError = {
                    stateResultFetchState.value =
                        ResultFetchState.OnError(it.errorResponse?.errorMessage)
                }
            )
        }
    }
}

SetupMainActivityView.kt

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SetupMainActivityView(
    viewModel: MainActivityViewModel = koinViewModel(),
    navigateToNext: () -> Unit,
) {
    Scaffold(topBar = {
        TopAppBar(
            title = { Text(text = stringResource(id = R.string.app_name)) },
            backgroundColor = getBackgroundColor(),
            elevation = 0.dp
        )
    }, content = { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(getBackgroundColor())
                .padding(padding),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                viewModel.getSportResult()
            }) {
                Text(text = stringResource(id = R.string.get_result))
            }
        }
    })
    when (val state = viewModel.stateResultFetchState.collectAsState().value) {
        is ResultFetchState.OnSuccess -> {}
        is ResultFetchState.IsLoading -> {
            navigateToNext()
        }
        is ResultFetchState.OnError -> {}
        is ResultFetchState.OnEmpty -> {}
    }
}

我的整个项目链接。 有人可以指导我如何在加载下一个屏幕后显示加载微调器。 谢谢

更新

导航图.kt

@Composable
internal fun NavigationGraph() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = ScreenRoute.Home.route) {
        composable(ScreenRoute.Home.route) {
            SetupMainActivityView{
                navController.navigate(ScreenRoute.Result.route)
            }
        }

        composable(ScreenRoute.Result.route) {
            ResultScreen()
        }
    }
}

结果屏幕.kt

@Composable
fun ResultScreen() {
    CircularProgressIndicator()
}

如果您需要更多代码，请查看我的存储库。 我在上面添加了我的 github 链接。 谢谢

Answer 1

我看不到您处理 Spinner 的代码。 无论如何，处理这些情况的一般想法是

val state = remember{mutableStateOf<ResultFetchState>(ResultFetchState.EMPTY)}

if(state == ResultFetchState.LOADING){
  //show spinner
   Spinner()
}

...

state.value = viewModel.stateResultFetchState.collectAsState().value