当前位置： 首页 > news >正文

一文彻底解析 Compose 的穿透刺客 -- CompositionLocal

news 2025/7/21 1:35:09

Compose 官方说明一直很简洁：CompositionLocal 是通过组合隐式向下传递数据的工具。


两个核心：隐式、向下传递，咋一看很懵，先不着急去理解，我们先看一段非常简单的代码：

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeBlogTheme {val name = "Hi, Compose!"    // name 是局部变量ShowMessage(name)}}}
}@Composable
fun ShowMessage(message: String) {Text(message)
}

这段代码中局部变量 name 以参数的方式被暴露出来了，在 Compose 中这叫做 State Hoisting（状态提升）。

现在思考两个问题：

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeBlogTheme {val name = "Hi, Compose!"ShowMessage(name)}👉🏻 name =     // 思考 1: 这边能不能获取到 name？}}
}@Composable
fun ShowMessage(message: String) {👉🏻 name =             // 思考 2: 这边能不能获取到 name？Text(message)
}

很明显都是不行的！因为 name 这个局部变量的 作用域 是限定在 ComposeBlogTheme {} 范围内的。

现在我们再来改下代码：

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeBlogTheme {val name = "Hi, Compose!"// ShowMessage(name)    // 这段代码我不要了}}}
}@Composable
fun ShowMessage() {    // 参数我也去掉，不需要外面传参进来Text(name)         // 我就直接把外面的 name 写到这里，直接用
}

这样写行吗？肯定是不行的！但我就想这么写，并且希望它可以运行，那么这种行为就意味着 name 这个局部变量要拥有可以穿出它的 作用域，并且穿透进 showMessage 函数的能力！

好消息，这种牛逼的行为就可以通过我们的主角：CompositionLocal 实现，它提供了这种 「穿透能力」。

再来看两张图你就更加明白 CompositionLocal 的神奇之处了。


在这里插入图片描述


我来解释一下这张图：绿色可组合项有个 stateData 参数，这个参数又跟顶层的可组合项有联系，正常代码中对于这种关联我们一般就是要不停的传参？很明显图中蓝色的可组合项就做了这些事，但这样你会发现，层积越多，参数可能就越多（因为别的可组合项也可能有自己的参数），这样代码的阅读和理解会特别费劲。

那如果用 CompositionLocal 呢？


在这里插入图片描述


现在整个树中不再需要蓝色的可组合项传递参数，哪里需要用 stateData，直接用就是了，因为顶层可组合项中通过 CompositonLocal 赋予了状态数据可以穿透的能力！

到这里你应该对 CompositionLocal 已经有了一个比较透测的理解了，接下来我们看看如何使用。

📓CompositionLocal


现在我们就来实现一个 CompostionLocal 功能，让上面的代码生效，总共需要经历三步：

1. 创建 CompositionLocal 实例

首先创建一个具有 「穿透能力」 的变量：

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeBlogTheme {val name = "Hi, Compose!"}}}
}@Composable
fun ShowMessage() {Text(name)
}// 1. 通过 compostionLocalOf 创建 CompositionLocal
val LocalName = compositionLocalOf<String> { "Compose" }

注意：在 Compose 中，一般定义这种具有「穿透能力」的 CompostionLocal，它的名称有个约定俗成的写法：LocalXXX。

2. 为 CompositionLocal 提供值

CompostionLocal 实例定义好了，我们要通过 provides 给它绑定一个值。

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeBlogTheme {val name = "Hi, Compose!"// 2. CompositionLocalProvider 可组合项可将值绑定到给定层次结构的 CompositionLocal 实例CompositionLocalProvider(LocalName provides name) {ShowMessage()}}}}
}@Composable
fun ShowMessage() {Text(name)
}// 1. 通过 compostionLocalOf 创建 CompositionLocal
val LocalName = compositionLocalOf<String> { "Compose" }

3. 获取 CompositionLocal 数据

前面两步其实就已经创建好了一个包含 数据 + 可穿透 的 CompositionLocal 了，最后一步就是获取到其中的数据。

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeBlogTheme {val name = "Hi, Compose!"// 2. CompositionLocalProvider 可组合项可将值绑定到给定层次结构的 CompositionLocal 实例CompositionLocalProvider(LocalName provides name) {ShowMessage()}}}}
}@Composable
fun ShowMessage() {// 3. 获取 nameText(LocalName.current)
}// 1. 通过 compostionLocalOf 创建 CompositionLocal
val LocalName = compositionLocalOf<String> { "Compose" }

现在运行程序试试？

📓 两种创建方式


前面的例子我们使用 compositionLocalOf 创建 CompositionLocal，另外官方还提供了 staticCompositionLocalOf。

  1. compositionLocalOf：在重组期间更改提供的值只会使读取其 current 值的内容无效。
  2. staticCompositionLocalOf：与 compositionLocalOf 不同，Compose 不会跟踪 staticCompositionLocalOf 的读取。更改该值会导致提供 CompositionLocal 的整个 content lambda 被重组，而不仅仅是在组合中读取 current 值的位置。

😵😵😵，没看懂？？？我们来看下面的代码：

1. compositionLocalOf

class MainActivity : ComponentActivity() {private val themeBackground by mutableStateOf(Color.Blue)override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeBlogTheme {CompositionLocalProvider(LocalBackground provides Color.Red) {TextBackground()CompositionLocalProvider(LocalBackground provides themeBackground) {/*** 2. themeBackground 变化后，仅此范围重组* TextBackground()*/CompositionLocalProvider(LocalBackground provides Color.Red) {TextBackground()}}TextBackground()}}}}
}@Composable
fun TextBackground() {Surface(color = LocalBackground.current) {Text("Hi, Compose")}
}// 1. Compose 会记录跟踪每一个调用 LocalBackground.current 的区域
val LocalBackground = compositionLocalOf { Color.Blue }

2. staticCompositionLocalOf

class MainActivity : ComponentActivity() {private val themeBackground by mutableStateOf(Color.Blue)override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ComposeBlogTheme {CompositionLocalProvider(LocalBackground provides Color.Red) {TextBackground()CompositionLocalProvider(LocalBackground provides themeBackground) {/*** 2. themeBackground 变化后，内部所有 content 全部重组* TextBackground()** CompositionLocalProvider(LocalBackground provides Color.Red) {*    TextBackground()* }*/}TextBackground()}}}}
}@Composable
fun TextBackground() {Surface(color = LocalBackground.current) {Text("Hi, Compose")}
}// Compose 不会记录跟踪每一个调用 LocalBackground.current 的区域
val LocalBackground = staticCompositionLocalOf { Color.Blue }

那么随之而来一个疑问：我们该用哪个创建 CompositionLocal？

3. 官方建议

如果为 CompositionLocal 提供的值发生更改的可能性微乎其微或永远不会更改，使用 staticCompositionLocalOf 可提高性能。

比如，我们看两个系统里面定义好的 CompositionLocal：

// 上下文固定不变，用 staticCompositionLocalOf
val LocalContext = staticCompositionLocalOf<Context> {noLocalProvidedFor("LocalContext")
}// 内部内容颜色常变，用 compositionLocalOf
val LocalContentColor = compositionLocalOf { Color.Black }

📓 CompositionLocal 应用场景


这里我们列举一些 CompositionLocal 的适用场景。

1. 提供上下文

LocalContext.current    // 是不是很熟悉？这其实就相当于 getContext()

2. MaterialTheme

其实官方的 MaterialTheme 就用到了 CompositionLocal，我们看源码：

@Composable
fun MaterialTheme(colors: Colors = MaterialTheme.colors,typography: Typography = MaterialTheme.typography,shapes: Shapes = MaterialTheme.shapes,content: @Composable () -> Unit
) {val rememberedColors = remember { colors.copy() }.apply { updateColorsFrom(colors) }val rippleIndication = rememberRipple()val selectionColors = rememberTextSelectionColors(rememberedColors)// 通过 providers 将 rememberedColors 提供给了 LocalColorsCompositionLocalProvider(LocalColors provides rememberedColors,LocalContentAlpha provides ContentAlpha.high,LocalIndication provides rippleIndication,LocalRippleTheme provides MaterialRippleTheme,LocalShapes provides shapes,LocalTextSelectionColors provides selectionColors,LocalTypography provides typography) {ProvideTextStyle(value = typography.body1) {PlatformMaterialTheme(content)}}
}

object MaterialTheme {val colors: Colors@Composable@ReadOnlyComposableget() = LocalColors.currentval typography: Typography@Composable@ReadOnlyComposableget() = LocalTypography.currentval shapes: Shapes@Composable@ReadOnlyComposableget() = LocalShapes.current
}
http://www.lryc.cn/news/281153.html

相关文章：

  • iOS 位移枚举NS_OPTIONS（如何实现多个枚举值的同时传入判断）
  • 【Axure高保真原型】树控制内联框架
  • Visual Studio常用快捷键及调试操作
  • MySQL 从零开始：02 MySQL 安装
  • GB28181/GB35114平台LiveGBS何如添加白名单，使指定海康、大华、华为等GB28181摄像头或录像机设备可以免密接入
  • 【计算机组成与体系结构Ⅱ】MIPS指令系统（实验）
  • jsonvue-mobile 联动方式说明。
  • abseil中的微操
  • NLP论文阅读记录 - 2022 | WOS 数据驱动的英文文本摘要抽取模型的构建与应用
  • 虹科新闻丨LIBERO医药冷链PDF温度计完成2024年航空安全鉴定，可安全空运！
  • 智能搬运机器人作为一种新型的物流技术
  • UI自动化测试工具对企业具有重要意义
  • Linux--进程状态与优先级
  • 如何实现无公网ip固定TCP端口地址远程连接Oracle数据库
  • Orchestrator源码解读2-故障失败发现
  • REST2SQL是什么？它有什么功能和特性？它值不值得我们去学习？我们该如何去学习呢？
  • Android 实现获取集合中出现重复数据的值和数量
  • 【QT学习十一】QThread
  • Mybatis 39_使用MBG生成代码
  • Hudi metadata table(元数据表)
  • 提高iOS App开发效率的方法
  • MPU机制与实现详解
  • pom文件冲突引起的Excel无法下载
  • 【HarmonyOS4.0】第十篇-ArkUI布局容器组件(二)
  • PLECS如何下载第三方库并导入MOSFET 的xml文件，xml库路径添加方法及相关问题
  • 使用emu8086实现——子程序的设计
  • 快速排序、归并排序、希尔排序（2023-12-25）
  • Qt SDL2播放Wav音频
  • [ACM学习] 动态规划基础之一二三维dp
  • Qt点击按钮在其附近弹出一个窗口