为什么这个函数在 Jetpack Compose 中被多次调用？

Question

我目前正在尝试 Android Compose。我有一个显示加密硬币价格的文本。如果价格上涨，文本颜色应为绿色，但如果价格下跌，则应为红色。当用户单击按钮时调用该函数。问题是函数 showPrice() 被调用了多次（有时只调用一次，有时调用 2-4 次）。因此，用户会看到错误的颜色。我该怎么做才能确保只调用一次？

主要活动：

@Composable
fun MainScreen() {
    val priceLiveData by viewModel.trackLiveData.observeAsState()
    val price = priceLiveData ?: return

    when (price) {
                is ViewState.Response -> showPrice(price = price.data)
                is ViewState.Error -> showError(price.text)
            }

    Button(onClick = {viewModel.post()} )
}

@Composable
private fun showPrice(price: Double) {
    lastPrice = sharedPref.getFloat("eth", 0f).toDouble()
    val color by animateColorAsState(if (price >= (lastPrice)) Color.Green else 
Color.Red)
    Log.v("TAG", "last=$lastPrice new = $price")
    editor.putFloat("eth", price.toFloat()).apply()
    Text(
          text = price.toString(),
          color = color,
          fontSize = 28.sp,
          fontFamily = fontFamily,
          fontWeight = FontWeight.Bold
      )
 }

ViewModel:

  @HiltViewModel
  class MyViewModel @Inject constructor(
    private val repository: Repository
): ViewModel() {

   private val _trackLiveData: MutableLiveData<ViewState<Double>> = MutableLiveData()
   val trackLiveData: LiveData<ViewState<Double>>
       get() = _trackLiveData

   fun post(
   ) = viewModelScope.launch(Dispatchers.Default) {
       try {
           val response = repository.post()
           _trackLiveData.postValue(ViewState.Response(response.rate.round(7)))
       } catch (e: Exception) {
           _trackLiveData.postValue(ViewState.Error())
           Log.v("TAG: viewmodelPost", e.message.toString())
    }
  }
}

视图状态：

sealed class ViewState<out T : Any> {
    class Response<out T : Any>(val data: T): ViewState<T>()
    class Error(val text:String = "Unknown error"): ViewState<Nothing>()
}

所以当我按下按钮调用 showPrice() 时。我可以在日志中看到这些行：

2021-06-10 16:39:18.407 16781-16781/com.myapp.myapp V/TAG: last=2532.375732421875 new = 2532.7403716
2021-06-10 16:39:18.438 16781-16781/com.myapp.myapp V/TAG: last=2532.740478515625 new = 2532.7403716
2021-06-10 16:39:18.520 16781-16781/com.myapp.myapp V/TAG: last=2532.740478515625 new = 2532.7403716

Answer 1

What can I do to ensure that it's only called once?

没什么，这就是它的工作方式。在 View 系统中你不会问“为什么我的视图失效了 3 次？”。框架根据需要使视图无效（重组），您不需要知道或关心这种情况何时发生。

您的代码的问题是您的可组合项正在从首选项中读取旧值，这不是它应该如何工作的，该值应该作为状态的一部分由视图模型提供。不要只提供新价格，而是公开一个包含新价格和旧价格的数据 Class，然后在您的可组合项中使用这 2 个值来确定要显示的颜色，或者公开要使用的价格和颜色。

为什么这个函数在 Jetpack Compose 中被多次调用？

Why this function is called multiple times in Jetpack Compose?

android

kotlin

android-jetpack

android-jetpack-compose