如何处理在Jetpack Compose中显示和隐藏自定义可重用的快讯栏？

huangapple
go评论91阅读模式
英文:

How to handle displaying and hiding a custom reusable snack bar in jetpack compose?

问题

我有一个可组合的 snackbar。以下是代码：

  1. @Composable
  2. fun CealSnackbar(title: String, performAction: () -> Unit) {
  4.     val counterState = remember { mutableStateOf(true) }
  6.     LaunchedEffect(Unit) {
  7.         while(true) {
  8.             delay(4000)
  9.             counterState.value = false
  10.             performAction()
  11.         }
  12.     }
  14.     AnimatedVisibility(
  15.         visible = counterState.value,
  16.         enter = slideInVertically() + fadeIn(),
  17.         exit = slideOutVertically() + fadeOut(),
  18.     ) {
  19.         Card(
  20.             modifier = Modifier
  21.                 .absoluteOffset(x = 0.dp, y = 10.dp)
  22.                 .padding(horizontal = 20.dp)
  23.                 .fillMaxWidth()
  24.                 .statusBarsPadding()
  25.                 .background(
  26.                     color = MaterialTheme.colors.primaryVariant,
  27.                     shape = RoundedCornerShape(10.dp)
  28.                 ), elevation = 20.dp
  29.         ) {
  30.             Row(
  31.                 modifier = Modifier
  32.                     .background(color = MaterialTheme.colors.primaryVariant)
  33.                     .padding(12.dp),
  34.                 horizontalArrangement = Arrangement.Start,
  35.                 verticalAlignment = Alignment.CenterVertically
  36.             ) {
  37.                 Image(
  38.                     painter = painterResource(id = R.drawable.error_circle),
  39.                     contentDescription = title
  40.                 )
  41.                 Text(
  42.                     text = title,
  43.                     fontFamily = FontFamily(Font(R.font.inter_medium)),
  44.                     fontSize = 12.sp,
  45.                     color = MaterialTheme.colors.primary,
  46.                     modifier = Modifier.padding(horizontal = 10.dp)
  47.                 )
  48.             }
  49.         }
  50.     }
  51. }

我想要 snackbar 出现和消失时有动画效果，并且它应该可以在任何组件中使用。

因此，当我在其他可组合中使用它时，我尝试在出现错误消息时显示它，错误消息是一个状态流：

  1. if(errorMsg.isNotEmpty()) {
  2.     CealSnackbar(
  3.         title = errorMsg, performAction = {
  4.             registrationViewModel.setErrorMsg("")
  5.         }
  6.     )
  7. }

如果我像上面这样使用它，动画不会发生，我应该如何重构它，以便在出现错误消息时可以在任何可组合中使用它。

英文:

I have a composable of snackbar. Below is the code

  1. @Composable
  2. fun CealSnackbar(title: String,performAction: () -> Unit,) {
  4.     val counterState = remember { mutableStateOf(true) }
  6.     LaunchedEffect(Unit) {
  7.         while(true) {
  8.             delay(4000)
  9.             counterState.value = false
  10.             performAction()
  11.         }
  12.     }
  14.     AnimatedVisibility(
  15.         visible = counterState.value,
  16.         enter = slideInVertically() + fadeIn(),
  17.         exit = slideOutVertically() + fadeOut(),
  18.     ) {
  19.         Card(
  20.             modifier = Modifier
  21.                 .absoluteOffset(x = 0.dp, y = 10.dp)
  22.                 .padding(horizontal = 20.dp)
  23.                 .fillMaxWidth()
  24.                 .statusBarsPadding()
  25.                 .background(
  26.                     color = MaterialTheme.colors.primaryVariant,
  27.                     shape = RoundedCornerShape(10.dp)
  28.                 ), elevation = 20.dp
  29.         ) {
  30.             Row(
  31.                 modifier = Modifier
  32.                     .background(color = MaterialTheme.colors.primaryVariant)
  33.                     .padding(12.dp),
  34.                 horizontalArrangement = Arrangement.Start,
  35.                 verticalAlignment = Alignment.CenterVertically
  36.             ) {
  37.                 Image(
  38.                     painter = painterResource(id = R.drawable.error_circle),
  39.                     contentDescription = title
  40.                 )
  41.                 Text(
  42.                     text = title,
  43.                     fontFamily = FontFamily(Font(R.font.inter_medium)),
  44.                     fontSize = 12.sp,
  45.                     color = MaterialTheme.colors.primary,
  46.                     modifier = Modifier.padding(horizontal = 10.dp)
  47.                 )
  48.             }
  49.         }
  50.     }
  51. }

I want the animation when the snackbar appears and disappears and it should be usable in any component

So while using this in other composable I am trying to display it when there is an error msg, the error msg is a state flow

  1. if(errorMsg.isNotEmpty()){
  2.         CealSnackbar(
  3.             title = errorMsg, performAction = {
  4.                 registrationViewModel.setErrorMsg("")
  5.             }
  6.         )
  7.     }

If I use it like above the animation does not take place, how should I refactor it so that I use it any composable when there is an error msg

答案1

得分: 1

使用 SnackbarHost

  1. val snackState = remember { SnackbarHostState() }
  2. val coroutineScope = rememberCoroutineScope()
  4. SnackbarHost(
  5.     hostState = snackState
  6. ) {
  7.     CealSnackbar(
  8.         title = errorMsg, performAction = {
  9.             registrationViewModel.setErrorMsg("")
  10.         }
  11.     )
  12. }
英文:

Use SnackbarHost

  1. val snackState = remember { SnackbarHostState() }
  2.     val coroutineScope = rememberCoroutineScope()
  6. SnackbarHost(
  7.             hostState = snackState
  8.         ){
  9.             CealSnackbar(
  10.                 title = errorMsg, performAction = {
  11.                     registrationViewModel.setErrorMsg("")
  12.                 }
  13.             )
  14.         }

huangapple
  • 本文由 发表于 2023年2月18日 13:46:07
  • 转载请务必保留本文链接：https://go.coder-hub.com/75491458.html
  • android
  • android-jetpack-compose
  • kotlin
  • kotlin-flow
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定