状态更改后撰写屏幕未重新组合

Question

我有一个带有

stateFlow

的 ViewModel。每次单击按钮时，我都会将值更改为状态，但由于某种原因，屏幕不会对该更改做出反应。 我知道状态的值确实会发生变化，因为当我转动屏幕并进行完全重新组合时，它会显示值更改后应显示的内容，但仅在转动屏幕后才显示。我想要在屏幕上进行更改而不转动屏幕。

这是我的

viewModel

@HiltViewModel
class CragToposViewModel @Inject constructor() : ViewModel() {

   private var _state = MutableStateFlow(CragToposState(true))
   val state = _state.asStateFlow()
}

这是我的模型

data class CragToposState(var zoomedOutImage: Boolean)

这是我的屏幕

@Composable
fun CragToposScreen(
    navController: NavController,
    cragToposViewModel: CragToposViewModel = hiltViewModel()
) {
    val state = cragToposViewModel.state.collectAsState()

    CragToposContent(
        navController = navController,
        state = state
    )
}

@Composable
fun CragToposContent(
    navController: NavController,
    state: State<CragToposState>
) {
    val context = LocalContext.current
    val scrollState = rememberScrollState()

    if (state.value.zoomedOutImage) {
          SOME OTHER STUFF HERE

          ZoomButton(state)
          
     else {
       SOME OTHER STUFF HERE

       ZoomButton(state)
     }

@Composable
fun ZoomButton(state: State<CragToposState>) {
    Box(
        modifier = Modifier
            .clickable { state.value.zoomedOutImage = !state.value.zoomedOutImage },
    ) {
        Icon(
            painter = if (state.value.zoomedOutImage)
                painterResource(R.drawable.icon_zoom_in)
            else painterResource(R.drawable.icon_zoom_out),
            contentDescription = "",
        )
    }
}        

我为状态设置新值的方式正确吗？

我这里需要

StateFlow

吗？我只想在按下按钮后改变状态

为什么我必须使用

State<CragToposState>

而不能只在

CragToposState

上使用

fun CragToposContent

？？？

Answer 1

有几件事：

1. 对于这样的状态，您甚至不需要视图模型。 您可以使用

   remember

   ：

@Composable
fun ZoomButton(){
  var state by remember { mutableStateOf(false)}
  Box(Modifier.clickable(onClick = {state = !state})){ TODO() }
}

2. 如果您需要提升状态，您应该使用

   () -> Unit

   :

@Composable
fun ZoomButton(onButtonClick: (Boolean) -> Unit = {}) {
  var state by remember { mutableStateOf(false)}
  Box(Modifier.clickable(onClick = {
    state = !state
    onButtonClick(state)
  })){ TODO() }
}