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
实例的对象:colorScheme
、typography
和shapes
,允许您稍后在 Composition 的任何子代部分检索它们。具体来说,这些是您可以通过MaterialTheme
的colorScheme
、shapes
和typography
属性访问的LocalColorScheme
、LocalShapes
和LocalTypography
属性。
@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
关联。CompositionLocalProvider
的content
lambda将在访问CompositionLocal
的current
属性时获得提供的值。提供新值时,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跟踪。更改其值会导致提供CompositionLocal
的content
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() } }
推荐内容
- 注意:JavaScript 关闭时显示链接文本。
- Compose 中主题的构成
- 在 Compose 中使用 Views
- Jetpack Compose 的 Kotlin