如何在使用 CompositionLocal 修改父数据时触发重组

Question

当我使用 CompositionLocal 时，我已经从父级获取数据并对其进行修改，但我发现它不会触发子级重组。

我已经成功更改了数据，这可以通过当我在子可组合项中添加一个额外的状态然后更改它以触发重组时我可以得到新数据来证明。

有人可以帮我吗？

附加

代码如下


data class GlobalState(var count: Int = 0)

val LocalAppState = compositionLocalOf { GlobalState() }

@Composable
fun App() {
    CompositionLocalProvider(LocalAppState provides GlobalState()) {
        CountPage(globalState = LocalAppState.current)
    }
}

@Composable
fun CountPage(globalState: GlobalState) {
    // use it request recomposition worked
//    val recomposeScope = currentRecomposeScope
    BoxWithConstraints(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .fillMaxSize()
            .clickable {
                globalState.count++
//                recomposeScope.invalidate()

            }) {
        Text("count ${globalState.count}")
    }
}

我发现一个解决方法是使用 currentRecomposable 强制重组，也许有更好的方法请告诉我。

Answer 1

我不确定你为什么要这样使用 compositionLocalOf。

使用状态提升模式，您可以在可组合项中使用两个参数：

value: T: 要显示的当前值。
onValueChange: (T) -> Unit：请求更改值的事件，其中 T 是建议的新值。

你的情况：

data class GlobalState(var count: Int = 0)

@Composable
fun App() {

    var counter by remember { mutableStateOf(GlobalState(0)) }
    CountPage(
        globalState = counter,
        onUpdateCount = {
                counter = counter.copy(count = counter.count +1)
            }
        )
}

@Composable
fun CountPage(globalState: GlobalState, onUpdateCount: () -> Unit) {
   
    BoxWithConstraints(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .fillMaxSize()
            .clickable (
                onClick = onUpdateCount
            )) {
        Text("count ${globalState.count}")
    }
}

Answer 2

当地的作文在这里是一条红鲱鱼。由于 GlobalScope 不是可观察的组合，因此不会通知它已更改。最简单的更改是将 GlobalState 的定义修改为，

class GlobalState(count: Int) {
   var count by mutableStateOf(count)
}

这将自动通知 compose count 的值已更改。

Answer 3

您可以将数据声明为 MutableState 并分别提供 getter 和 setter 或直接提供 MutableState 对象。

internal val LocalTest = compositionLocalOf<Boolean> { error("lalalalalala") }
internal val LocalSetTest = compositionLocalOf<(Boolean) -> Unit> { error("lalalalalala") }

@Composable
fun TestProvider(content: @Composable() () -> Unit) {
  val (test, setTest) = remember { mutableStateOf(false) }

  CompositionLocalProvider(
    LocalTest provides test,
    LocalSetTest provides setTest,
  ) {
    content()
  }
}

在子组件中你可以做：

@Composable
fun Child() {
  val test = LocalTest.current
  val setTest = LocalSetTest.current

  Column {
    Button(onClick = { setTest(!test) }) {
      Text(test.toString())
    }
  }
}

如何在使用 CompositionLocal 修改父数据时触发重组

How to trigger recomposition when modify the parent data using CompositionLocal

android

kotlin

android-jetpack-compose

composable

附加