如何在 Jetpack compose 中创建保存/删除按钮？

Question

我对 Jetpack 和整个 Android 开发还是新手。 我的问题是我有一个像这样的@Composable：

@Composable
private fun RecipeDetailsBody(
  recipe: SmallResult,
  pressOnBack: () -> Unit,
  viewModel: DetailViewModel,
) {
  var like = remember { mutableStateOf(false) }

  LaunchedEffect(like.value) {
    if(viewModel.checkIfRecipeIsFavourite(recipe.id) > 0) {
      like.value = true
    }
    if(like.value) {
      viewModel.saveRecipe(recipe.convertToFavourite())
    } else {
      viewModel.deleteRecipe(recipe.id)
    }
  }

  Column(
    modifier = Modifier
      .fillMaxSize()
      .background(White)
      .verticalScroll(rememberScrollState())
  ) {
    Row(
      modifier = Modifier.fillMaxWidth(),
      horizontalArrangement = Arrangement.SpaceBetween
    ) {
      Column(
        modifier = Modifier
          .weight(0.8f)
      ) {
        Text(
          text = recipe.name,
          style = MaterialTheme.typography.h5,
          fontWeight = FontWeight.Black,
          overflow = TextOverflow.Ellipsis,
          maxLines = 3,
          modifier = Modifier
            .padding(16.dp, top = 0.dp)
        )
      }
      Box(
        modifier = Modifier
          .weight(0.2f)
          .padding(8.dp)
          .widthIn(max = 0.1.dp),
        contentAlignment = Alignment.Center

      ) {
        Button(
          interactionSource = NoRippleInteractionSource(),
          onClick = {
            like.value = !like.value
          }
        ) {
          val tint = if(like.value) TealLight else Grey
          Icon(
            imageVector = Icons.Default.ThumbUp,
            contentDescription = "Add To Favourites",
            tint = TealLight,
            modifier = Modifier
              .size(40.dp)
              .padding(4.dp),
          )
        }
      }
    }
  }
}

我的问题是，当我按下“喜欢”按钮时，它会重新组合这部分，并且“喜欢”永远保持不变。我不知道如何正确设置此按钮按下。

我的主要目标是，如果我在按钮呈灰色且项目未保存时按下按钮，请将其保存并使按钮着色。当其着色并再次按下时，将其从数据库中删除。 当我打开此页面时，我想检查食谱是否已保存并对按钮进行预着色。

我使用 LaunchedEffect 因为我的 db 函数已挂起。但如果有更好的方法来实现这一点，我会洗耳恭听！

Answer 1

根据我从您提供的问题描述和代码中可以理解的，我认为您的问题如下：

 LaunchedEffect(like.value) {
    if(viewModel.checkIfRecipeIsFavourite(recipe.id) > 0) {
        like.value = true
    }
    if(like.value) {
        viewModel.saveRecipe(recipe.convertToFavourite())
    } else {
        viewModel.deleteRecipe(recipe.id)
    }
}

launchEffect仅在like的值改变时运行，所以在初始组合期间你基本上得不到.checkIfRecipeIsFavourite()的值。

你可以做的是，检查食谱是否已经在最初的组合过程中受到喜爱，如下所示：

 LaunchedEffect(true) {
    like = viewModel.checkIfRecipeIsFavourite(recipe.id) > 0
}

然后将保存/删除逻辑移动到另一个启动的效果：

  LaunchedEffect(like.value) {
    if (like.value) {
        viewModel.saveRecipe(recipe.convertToFavourite())
    } else {
        viewModel.deleteRecipe(recipe.id)
    }
}

希望这有帮助。