Jetpack Compose暗黑模式下特定文本需包裹Surface才显示浅色原因咨询

核心原因是 Jetpack Compose 的 LocalContentColor 局部内容色继承机制，具体逻辑如下： #

基础规则 #

• 所有 Text 组件如果不手动指定color属性，默认文本色会自动读取当前层级的 LocalContentColor.current 值
• Surface 组件的核心特性之一就是会根据自身的背景色，自动调整当前层级的LocalContentColor为符合对比度要求的匹配色：
  • 暗黑模式下，Surface默认背景色为MaterialTheme.colors.surface（深色），对应的LocalContentColor会自动设为MaterialTheme.colors.onSurface（浅色）
  • 亮色模式下则会自动匹配为深色的内容色

各场景差异的原因 #

1. VerticalListItem 文本正常适配的原因
   列表页面的根布局默认包裹了项目自动生成的根Surface，列表的Column继承了根Surface提供的适配当前主题的LocalContentColor，所以文本不需要额外处理就能自动适配暗黑模式。
2. Button 内部文本正常适配的原因
   Button 本身是基于Surface封装的组件，内部会根据自身的背景色（默认是主题的primary色）自动设置对应内容色onPrimary，所以不管外层的内容色是什么，按钮内部的文本都会自动取适配按钮背景的颜色，暗黑模式下自然显示浅色。
3. DetailView 描述文本必须包裹Surface的原因
   你的DetailView中描述文本所在的上层容器（根Column的下半部分）没有设置背景，也没有嵌套Surface，该层级的LocalContentColor没有被正确更新为适配暗黑模式的浅色，所以文本默认显示为深色；当你套了Surface之后，Surface会自动根据当前主题设置匹配的内容色，文本就能正常显示浅色。

替代验证方案 #

你也可以去掉Surface包裹，直接给描述文本手动设置颜色属性，效果完全一致：

Text(
    modifier = Modifier.padding(8.dp),
    text = item.description,
    style = typography.body2,
    color = MaterialTheme.colors.onSurface
)

内容的提问来源于stack exchange，提问作者Ali