在 Android 中进入/加载基于 Jetpack Compose 的屏幕时从网络或数据库获取数据

Question

我是 Jetpack Compose 和 Kotlin 的新手，但我正在尝试使用最近稳定的 Jetpack Compose v1.0.0.0开发移动应用程序

我使用NavController进行导航，我的屏幕是使用可组合函数制作的。

因为我的屏幕本身是一个可组合函数，所以我无法理解如何在可组合函数条目上加载一些 API/DB 数据。

我尝试阅读有关 的内容LaunchedEffect，但不知道这是否是正确的方法，而且实施起来也很复杂。

这是示例代码：

1. DemoScreen.kt：将此视为我的startDestination屏幕NavHost。

   @Composable fun DemoScreen(navController: NavController) {

    var json = "Placeholder content, to be updated on screen load and refreshed every x seconds..."
   
    //1. Make network or DB call as soon as entering this composable and store in the "json" variable
    //makeDataLoadCallOnEntry() //something like this, and show processing indicator...
   
    //2. And then keep refreshing/updating the content of the "json" variable by calling this
    //function in a timer
   
   
   
    Box(modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight()
    ){
        //region #Region: Main content area
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 0.dp)
            //.padding(top = 120.dp)
        ) {
   
            TextField(
                value = json,
                onValueChange = { json = it },
                singleLine = false,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(5.dp)
                    .height(500.dp),
                maxLines = 10,
            )
            val coroutineScope = rememberCoroutineScope()
   
            Button(
                onClick = {
                    coroutineScope.launch {
                        withContext(Dispatchers.IO) {
                            try {
                                //do something in button click
   
                            } catch (e: Exception) {
                                // handle exception
                                Log.d("button", e.message.toString())
                            } finally {
                                //do something
                                Log.d("button", "in finally")
                            }
                        }
   
                    }
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(5.dp)
                    .height(100.dp)
            ) {
                Text(text = "Demo Button")
            }
        }
        //endregion
    }
   

   }

2. 我的NavHost看起来像这样（工作正常）：

   @Composable fun NavigationMaster() { val navController = RememberNavController() val defaultScreen = Screens.DemoScreen.route

    NavHost(
        navController = navController,
        startDestination = defaultScreen){
   
        composable(
            route = Screens.DemoScreen.route
        ){
            DemoScreen(navController = navController)
        }
   
   
    }
   

   }

3. 如何在DemoScreen可组合条目上调用函数，以便在渲染屏幕之前从 API 获取数据。

4. 如果我能得到上述内容，那么我想我应该能够实现计时器部分，以使用循环和/或计时器自动刷新 API 中的数据。

这是此屏幕当前外观的演示屏幕截图（演示按钮不执行任何操作，请忽略它）：

Answer 1

您可以使用视图模型来做到这一点，如下所示：

@Composable
fun DemoScreen() {
    val viewModel = viewModel<DemoScreenViewModel>()
    when (val state = viewModel.state.collectAsState().value) {
        DemoScreenViewModel.State.Loading -> {
            Text("Loading")
        }
        is DemoScreenViewModel.State.Data -> {
            DemoScreenContent(state.data)
        }
    }
}

class DemoScreenViewModel : ViewModel() {
    sealed class State {
        object Loading: State()
        data class Data(val data: String): State()
    }

    private var _state = MutableStateFlow<State>(State.Loading)
    val state = _state.asStateFlow()

    init {
        viewModelScope.launch {
            while (isActive) {
                val data = makeDataLoadCallOnEntry()
                _state.value = State.Data(data)
                // wait one minute and repeat your request
                delay(60 * 1000L)
            }
        }
    }

    suspend fun makeDataLoadCallOnEntry(): String {
        delay(1000)
        return "Hello world"
    }
}