使用CompositionLocal进行局部作用域数据

CompositionLocal 是一个用于隐式地将数据向下传递到 Composition 的工具。在本页中,您将更详细地了解CompositionLocal是什么,如何创建自己的CompositionLocal,以及CompositionLocal是否适合您的用例。

介绍CompositionLocal

通常在 Compose 中,数据向下通过 UI 树作为每个可组合函数的参数传递。这使得可组合的依赖关系明确。但是,对于非常频繁和广泛使用的数据(例如颜色或类型样式),这可能会很麻烦。请参阅以下示例

@Composable
fun MyApp() {
    // Theme information tends to be defined near the root of the application
    val colors = colors()
}

// Some composable deep in the hierarchy
@Composable
fun SomeTextLabel(labelText: String) {
    Text(
        text = labelText,
        color = colors.onPrimary // ← need to access colors here
    )
}

为了避免需要将颜色作为显式参数依赖项传递给大多数可组合项,**Compose 提供了CompositionLocal,它允许您创建树范围的命名对象,这些对象可以用作一种隐式的方式让数据通过 UI 树流动。**

CompositionLocal 元素通常在 UI 树的某个节点中提供值。其可组合的子代可以使用该值,而无需在可组合函数中将CompositionLocal声明为参数。

CompositionLocal是Material主题在底层使用的。 MaterialTheme是一个提供三个CompositionLocal实例的对象:colorSchemetypographyshapes,允许您稍后在 Composition 的任何子代部分检索它们。具体来说,这些是您可以通过MaterialThemecolorSchemeshapestypography属性访问的LocalColorSchemeLocalShapesLocalTypography属性。

@Composable
fun MyApp() {
    // Provides a Theme whose values are propagated down its `content`
    MaterialTheme {
        // New values for colorScheme, typography, and shapes are available
        // in MaterialTheme's content lambda.

        // ... content here ...
    }
}

// Some composable deep in the hierarchy of MaterialTheme
@Composable
fun SomeTextLabel(labelText: String) {
    Text(
        text = labelText,
        // `primary` is obtained from MaterialTheme's
        // LocalColors CompositionLocal
        color = MaterialTheme.colorScheme.primary
    )
}

CompositionLocal实例的作用域限定为 Composition 的一部分,因此您可以在树的不同级别提供不同的值。current 的当前值CompositionLocal对应于 Composition 该部分中祖先提供的最接近的值。

要为CompositionLocal提供新值,请使用CompositionLocalProvider及其provides中缀函数,该函数将CompositionLocal键与value关联。CompositionLocalProvidercontent lambda将在访问CompositionLocalcurrent属性时获得提供的值。提供新值时,Compose 会重新组合读取CompositionLocal的 Composition 部分。

例如,LocalContentColor CompositionLocal包含文本和图标的首选内容颜色,以确保其与当前背景颜色对比。在下面的示例中,CompositionLocalProvider用于为 Composition 的不同部分提供不同的值。

@Composable
fun CompositionLocalExample() {
    MaterialTheme {
        // Surface provides contentColorFor(MaterialTheme.colorScheme.surface) by default
        // This is to automatically make text and other content contrast to the background
        // correctly.
        Surface {
            Column {
                Text("Uses Surface's provided content color")
                CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.primary) {
                    Text("Primary color provided by LocalContentColor")
                    Text("This Text also uses primary as textColor")
                    CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.error) {
                        DescendantExample()
                    }
                }
            }
        }
    }
}

@Composable
fun DescendantExample() {
    // CompositionLocalProviders also work across composable functions
    Text("This Text uses the error color now")
}

图1. CompositionLocalExample 可组合项的预览。

在最后一个示例中,CompositionLocal实例由 Material 可组合项内部使用。要访问CompositionLocal的当前值,请使用其current属性。在下面的示例中,常用的 Android 应用的LocalContext CompositionLocal 的当前Context值用于格式化文本

@Composable
fun FruitText(fruitSize: Int) {
    // Get `resources` from the current value of LocalContext
    val resources = LocalContext.current.resources
    val fruitText = remember(resources, fruitSize) {
        resources.getQuantityString(R.plurals.fruit_title, fruitSize)
    }
    Text(text = fruitText)
}

创建您自己的CompositionLocal

CompositionLocal用于隐式地将数据向下传递到 Composition 的工具

使用CompositionLocal的另一个关键信号是参数是横切的,并且中间实现层不应该知道它的存在,因为让这些中间层知道会限制可组合的实用性。例如,查询 Android 权限由底层的CompositionLocal提供。媒体选择器可组合项可以添加访问设备上受权限保护内容的新功能,而无需更改其 API 并要求媒体选择器的调用者了解从环境中使用的此附加上下文。

但是,CompositionLocal并不总是最好的解决方案。我们不鼓励过度使用CompositionLocal,因为它有一些缺点

CompositionLocal使可组合的行为更难推理。因为它们创建了隐式依赖关系,所以使用它们的可组合项的调用者需要确保满足每个CompositionLocal的值。

此外,此依赖项可能没有明确的真相来源,因为它可以在 Composition 的任何部分发生变化。因此,当出现问题时调试应用程序可能会更具挑战性,因为您需要导航到 Composition 以查看提供current值的位置。IDE 中的“查找用法”等工具或Compose 布局检查器提供了足够的信息来缓解此问题。

决定是否使用CompositionLocal

某些条件可以使CompositionLocal成为适合您用例的良好解决方案

CompositionLocal应该具有良好的默认值。如果没有默认值,您必须保证开发人员极难陷入未提供CompositionLocal值的情况。不提供默认值可能会在创建测试或预览使用该CompositionLocal的可组合项时导致问题和挫折,这将始终需要显式提供它。

避免将CompositionLocal用于不被认为是树范围或子层次结构范围的概念CompositionLocal在任何子代都可能使用它时才有意义,而不是少数几个子代。

如果您的用例不满足这些要求,请在创建CompositionLocal之前查看要考虑的替代方案部分。

一个不好的做法示例是创建一个CompositionLocal来保存特定屏幕的ViewModel,以便该屏幕中的所有可组合项都可以获得对ViewModel的引用以执行某些逻辑。这是一个不好的做法,因为特定 UI 树下的并非所有可组合项都需要了解ViewModel。好的做法是仅将它们需要的信息传递给可组合项,遵循状态向下流动,事件向上流动的模式。这种方法将使您的可组合项更易于重用和测试。

创建CompositionLocal

有两种 API 可以创建CompositionLocal

  • compositionLocalOf:在重新组合期间更改提供的值只会使读取其current值的内容失效。

  • staticCompositionLocalOf:与compositionLocalOf不同,staticCompositionLocalOf的读取不会被Compose跟踪。更改其值会导致提供CompositionLocalcontent lambda 的整体重新组合,而不是仅重新组合在 Composition 中读取current 值的位置。

如果提供给CompositionLocal的值极不可能更改或永远不会更改,请使用staticCompositionLocalOf来获得性能优势。

例如,应用程序的设计系统可能会对使用 UI 组件阴影来提升组合元素的方式有其偏好。由于应用程序的不同高度应该在整个 UI 树中传播,因此我们使用CompositionLocal。由于CompositionLocal的值是根据系统主题有条件地派生的,因此我们使用compositionLocalOf API。

// LocalElevations.kt file

data class Elevations(val card: Dp = 0.dp, val default: Dp = 0.dp)

// Define a CompositionLocal global object with a default
// This instance can be accessed by all composables in the app
val LocalElevations = compositionLocalOf { Elevations() }

CompositionLocal提供值

CompositionLocalProvider 组合元素将值绑定到给定层次结构中的CompositionLocal 实例。要向CompositionLocal 提供新值,请使用provides 中缀函数,该函数将CompositionLocal 键与value 关联,如下所示:

// MyActivity.kt file

class MyActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            // Calculate elevations based on the system theme
            val elevations = if (isSystemInDarkTheme()) {
                Elevations(card = 1.dp, default = 1.dp)
            } else {
                Elevations(card = 0.dp, default = 0.dp)
            }

            // Bind elevation as the value for LocalElevations
            CompositionLocalProvider(LocalElevations provides elevations) {
                // ... Content goes here ...
                // This part of Composition will see the `elevations` instance
                // when accessing LocalElevations.current
            }
        }
    }
}

使用CompositionLocal

CompositionLocal.current 返回由最近的CompositionLocalProvider 提供给该CompositionLocal 的值。

@Composable
fun SomeComposable() {
    // Access the globally defined LocalElevations variable to get the
    // current Elevations in this part of the Composition
    MyCard(elevation = LocalElevations.current.card) {
        // Content
    }
}

其他替代方案

对于某些用例,CompositionLocal 可能是一种过度的解决方案。如果您的用例不符合决定是否使用 CompositionLocal 部分中指定的标准,则其他解决方案可能更适合您的用例。

传递显式参数

明确组合元素的依赖关系是一个好习惯。我们建议您只向组合元素传递其所需的内容。为了鼓励组合元素的解耦和重用,每个组合元素应该只保存尽可能少的信息。

@Composable
fun MyComposable(myViewModel: MyViewModel = viewModel()) {
    // ...
    MyDescendant(myViewModel.data)
}

// Don't pass the whole object! Just what the descendant needs.
// Also, don't  pass the ViewModel as an implicit dependency using
// a CompositionLocal.
@Composable
fun MyDescendant(myViewModel: MyViewModel) { /* ... */ }

// Pass only what the descendant needs
@Composable
fun MyDescendant(data: DataToDisplay) {
    // Display data
}

控制反转

避免向组合元素传递不必要的依赖关系的另一种方法是控制反转。子元素不需要依赖项来执行某些逻辑,而是父元素来执行。

请参见以下示例,其中子元素需要触发加载某些数据的请求。

@Composable
fun MyComposable(myViewModel: MyViewModel = viewModel()) {
    // ...
    MyDescendant(myViewModel)
}

@Composable
fun MyDescendant(myViewModel: MyViewModel) {
    Button(onClick = { myViewModel.loadData() }) {
        Text("Load data")
    }
}

根据具体情况,MyDescendant 可能承担很多责任。此外,将MyViewModel 作为依赖项传递会降低MyDescendant 的可重用性,因为它们现在耦合在一起。考虑另一种方法,它不将依赖项传递给子元素,并使用控制反转原则,使祖先负责执行逻辑。

@Composable
fun MyComposable(myViewModel: MyViewModel = viewModel()) {
    // ...
    ReusableLoadDataButton(
        onLoadClick = {
            myViewModel.loadData()
        }
    )
}

@Composable
fun ReusableLoadDataButton(onLoadClick: () -> Unit) {
    Button(onClick = onLoadClick) {
        Text("Load data")
    }
}

这种方法可能更适合某些用例,因为它将子元素与其直接祖先解耦。祖先组合元素往往变得更复杂,以拥有更灵活的低级组合元素。

同样,@Composable 内容 lambda 可以以相同的方式使用以获得相同的好处

@Composable
fun MyComposable(myViewModel: MyViewModel = viewModel()) {
    // ...
    ReusablePartOfTheScreen(
        content = {
            Button(
                onClick = {
                    myViewModel.loadData()
                }
            ) {
                Text("Confirm")
            }
        }
    )
}

@Composable
fun ReusablePartOfTheScreen(content: @Composable () -> Unit) {
    Column {
        // ...
        content()
    }
}