如何修改Jetpack Compose中SelectionContainer的选中文字颜色

核心原理 #

SelectionContainer 本身不对外暴露颜色配置参数，它的选中态样式属于全局文本选中主题范畴，通过 Compose 的 CompositionLocal 机制读取 LocalTextSelectionColors 配置实现，你可以通过重写该局部配置实现自定义选中颜色效果。

实现代码 #

单区域自定义 #

仅修改指定 SelectionContainer 的选中颜色，不影响全局其他组件：

// 自定义选中颜色配置
val customSelectionColors = TextSelectionColors(
    handleColor = Color(0xFF2196F3), // 选中文本两端的手柄颜色
    backgroundColor = Color(0xFF90CAF9).copy(alpha = 0.4f) // 选中文本的背景色
)

// 外层包裹Provider重写局部配置
CompositionLocalProvider(
    LocalTextSelectionColors provides customSelectionColors
) {
    SelectionContainer {
        // 内部的所有可选中文本都会使用自定义选中颜色
        Column {
            Text("测试选中文本1")
            Text("测试选中文本2")
        }
    }
}

全局生效 #

如果需要修改整个App的所有选中文本颜色，将 CompositionLocalProvider 套在你的根主题外层即可：

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        setContent {
            val globalSelectionColors = TextSelectionColors(
                handleColor = Color.Green,
                backgroundColor = Color.Yellow.copy(alpha = 0.3f)
            )
            CompositionLocalProvider(
                LocalTextSelectionColors provides globalSelectionColors
            ) {
                MyAppTheme {
                    // 根页面
                    AppNavHost()
                }
            }
        }
    }
}

注意事项 #

• 局部重写的配置优先级高于全局配置，可以嵌套使用实现不同页面不同选中颜色的需求
• 该配置同时作用于 TextField 等其他可输入选中文本的组件，如有单独修改需求可以在对应组件外层再次重写 LocalTextSelectionColors

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