多状态喷气背包组成屏幕

Question

我的屏幕应该显示三件事之一：（我对Jetpack Compose也很陌生）

一个 Loader（） 如果加载 一个 AlertDialog（） 如果有错误 最后，基于我的视图模型中的一个 int，一个新的 ScreenX（）

我在视图模型中进行了 API 调用，并相应地更新了 3 个状态变量。问题在于，所有视图似乎都出现在彼此之上。

如果我尝试返回 Loader（），我会收到一个错误。

也许这不是正确的方法，但是有什么方法可以在可组合对象中使用动态屏幕吗？

@Composable
fun ConnectionScreen(
    ip: String,
    viewModel: BridgeViewModel,
    navController: NavHostController
) {
    val page = viewModel.page.collectAsState()
    val loading = viewModel.loading.collectAsState()
    val error = viewModel.error.collectAsState()

    Scaffold {
        if (loading.value) {
            Loader()
        }

        error.value?.let {
            AlertDialogWithButtons(
                title = "Error",
                message = it,
                onNegativeClick = { },
                onPositiveClick = {},
            )
        }

        when (page.value) {
            0 -> Screen0() 
            1 -> Screen1() 
            2 -> Screen2()
        }
    }
}

Answer 1

我决定创建一个封装数据类来更好地表示 UI 状态。它不是最好的，不幸的是不可重用（我需要为每个屏幕创建一个新的数据类？即使大多数将使用API，因此加载和错误应该是可重用的）。

enum class ResourceState { LOADING, ERROR, LINK, FINISH }

data class CreateResourceState(
    val loading: Boolean = false,
    val error: String? = null,
    val page: Int = 0,
) {
    val state: ResourceState
        get() {
            return if (loading) ResourceState.LOADING
            else if (error != null) ResourceState.ERROR
            else if (page == 1) ResourceState.LINK
            else if (page == 2) ResourceState.FINISH
            else ResourceState.LOADING
        }
}

然后在我的观点模型中

private val _uiState = MutableStateFlow(CreateResourceState(loading = true))
val uiState: StateFlow<CreateResourceState> = _uiState

...

_uiState.value = CreateResourceState(error = exception.message)

...

_uiState.value = CreateResourceState(page = 1)

最后在用户界面中

val uiState = viewModel.uiState.collectAsState()

when (uiState.value.state) {
    ResourceState.LOADING -> Loader()
    ResourceState.ERROR -> ErrorDialog()
    ResourceState.LINK -> Screen1()
    ResourceState.FINISH -> Screen2()
}

对我来说，您只能返回一个且只能返回一个可组合项似乎仍然很奇怪。也许我太习惯了 Flutter，您可以在另一个 Widget 中随时动态返回任何 Widget。

Answer 2

有这个错误（我很确定我们可以这样称呼它，因为它会崩溃整个应用程序并显示无意义的错误消息），您无法从可组合布局中的 lambda 内部返回。因此，如果您这样做：

Column {
  if (variable){
    return 
  }
  Text("test")
}

如果变量为 true，则编写硬崩溃。我正在尝试查找是否有错误报告。同时 - 您可以采取 2 件事来避免这种情况：

您可以移动代码以使其正常运行，如下所示：

@Composable
fun ConnectionScreen(
    ip: String,
    viewModel: BridgeViewModel,
    navController: NavHostController
) {
    Scaffold {
        Content(viewModel)
    }
}

@Composable
fun Content(viewModel: BridgeViewModel) {
    val page = viewModel.page.collectAsState()
    val loading = viewModel.loading.collectAsState()
    val error = viewModel.error.collectAsState()
    if (loading.value) {
            Loader()
        }

        error.value?.let {
            AlertDialogWithButtons(
                title = "Error",
                message = it,
                onNegativeClick = { },
                onPositiveClick = {},
            )
        }

        when (page.value) {
            0 -> Screen0() 
            1 -> Screen1() 
            2 -> Screen2()
        }
{

或者你可以坚持if-else，就像这样：

@Composable
fun ConnectionScreen(
    ip: String,
    viewModel: BridgeViewModel,
    navController: NavHostController
) {
    val page = viewModel.page.collectAsState()
    val loading = viewModel.loading.collectAsState()
    val error = viewModel.error.collectAsState()

    Scaffold {
        if (loading.value) {
            Loader()
        } else {
            error.value?.let {
                AlertDialogWithButtons(
                    title = "Error",
                    message = it,
                    onNegativeClick = { },
                    onPositiveClick = {},
                )
            }

            when (page.value) {
                0 -> Screen0() 
                1 -> Screen1() 
                2 -> Screen2()
            }
        }
    }
}