Jetpack Compose 中未显示 Snackbar

Question

我的屏幕有一个按钮，单击它后，我想短时间显示一个小吃栏。所以这是我的可组合项：

@Composable
fun RegisterLocation(
    navController: NavController,
    locationVm: LocationViewModel = LocationViewModel()
) {
    val uiState = locationVm.locationState.collectAsState(LocationUiState.Init)
    val snackbarHostState = remember { SnackbarHostState() }
    when (uiState.value) {
        is LocationUiState.Init -> RegisterLocation(locationVm, snackbarHostState)
        is LocationUiState.Invalid -> {
            LaunchedEffect(locationVm.locationState.value) {
                snackbarHostState.showSnackbar(
                    "Failed Creating Location. Try Again!!!"
                )
            }
        }
        is LocationUiState.Valid -> navController.popBackStack()
    }
}

@Composable
fun RegisterLocation(locationVm: WLocationViewModel, snackbarHostState: SnackbarHostState) {
    Box(Modifier.fillMaxSize()) {
        Column {
            SubmitLocation(locationVm)
        }

        Column(
            Modifier
                .fillMaxWidth()
                .align(Alignment.BottomCenter)
        ) {
            Text(text = "Hello") // <-- This is a dummy text and it shows in the UI. Moreover, it animates up to give space for snackbar. But the snackbar doesn't show up :(
            RegistrationError(snackbarHostState)
        }
    }
}

@ExperimentalCoroutinesApi
@Composable
fun SubmitLocation(vm: WLocationViewModel) {
    Button(
        onClick = { vm.onCreate(LocationUiState.Invalid) },
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(text = "Submit Location")
    }
}

@Composable
fun RegistrationError(hostState: SnackbarHostState) {
    SnackbarHost(
        hostState = hostState,
        modifier = Modifier.fillMaxWidth(),
        snackbar = {
            Snackbar {
                Text(text = "Hello", color = Color.White)
            }
        }
    )
}

这段代码有什么问题？任何帮助将不胜感激。

Answer 1

SnackbarHostState 在 Scaffold 中显示 snackbar 或者可以作为参数传递给 SnackBar 可组合项。

Why the snackbar host does not show the snackbar ?

每当 state 更改时，snackBar NOT 有任何 Scaffold 或 SnackbarHost 来显示内容。（ snackbarHostState 也可以在编写你已经完成的 SnackBar 时传递 - 检查解决方案 2 ）

在 Invalid 状态期间，您既没有使用 Scaffold 也没有通过使用 snackBarHostState 组成 SnackBarHost。

解决方案 1

我们需要将 SnackbarHostState 附加到 Scaffold 以使其显示。

when (uiState.value) {
   is LocationUiState.Init -> RegisterLocation(locationVm, snackbarHostState)
   is LocationUiState.Invalid -> {
         LaunchedEffect(locationVm.locationState.value) {
            snackbarHostState.showSnackbar(
                    "Failed Creating Location. Try Again!!!",
                    "label",
                    duration = SnackbarDuration.Long
            )
         }
         Scaffold(
                // attach snackbar host state to the scaffold
             scaffoldState = rememberScaffoldState(snackbarHostState = snackbarHostState),
             content = { } // content is not mandatory
         )
   }
}

解决方案 2:-

您永远不会在 Invalid 状态下撰写 RegisterLocation(locationVm, snackbarHostState)。根据代码，如果我们在 Invalid 状态下组合 RegisterLocation 可组合项，那么作为可组合项添加的 snackbar 也应该显示。

when (uiState.value) {
        is LocationUiState.Init -> RegisterLocation(locationVm, snackbarHostState)
        is LocationUiState.Invalid -> {
            RegistrationError(hostState = snackbarHostState)
            LaunchedEffect(locationVm.locationState.value) {
                snackbarHostState.showSnackbar(
                    "Failed Creating Location. Try Again!!!",
                    "label",
                    duration = SnackbarDuration.Long
                )
            }
        }
}

更新（详细说明）

Compose 在后台维护一个 GroupArray，其中包含根据其位置在屏幕上绘制的所有 UI 元素。因此，在重新组合期间，它仅比较并显示在重新组合期间绘制的 UI 元素，并删除在先前组合期间构建的其他组件是redundant（因为我们在重新组合期间不访问的UI组件被删除）。

对于您的情况：- states 完全不同，我们在 秒[期间从未访问 Init 状态作文。因此，compose 在重新组合期间看到我们永远不会访问 Init 状态，因此它将 Init UI 从其内存中删除。（在后台使用 positional memoisation）。

请检查compose under the hood

Jetpack Compose 中未显示 Snackbar

Snackbar not showing in Jetpack Compose

android

android-jetpack-compose