如何为作为参数传递的Composable添加样式与修饰符

一、给传入的Composable添加Modifier #

如果不想改动现有title参数的定义，最直接靠谱的方式就是用容器组件（比如Box）包裹title()并附上需要的Modifier——这其实是官方组件常用的实现思路，完全不是临时凑数的方案：

@Composable
fun EnableDisableRow(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    status: @Composable () -> Unit = {},
    onEnableClick: () -> Unit,
    onDisableClick: () -> Unit,
) {
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 用Box包裹title，直接应用Modifier.weight(1f)
        Box(modifier = Modifier.weight(1f)) {
            title()
        }
        // 示例其他代码：状态按钮
        Button(onClick = onEnableClick) {
            Text("启用")
        }
        Spacer(modifier = Modifier.width(8.dp))
        Button(onClick = onDisableClick) {
            Text("禁用")
        }
    }
}

要是允许微调参数定义，更规范的做法是让title接受Modifier参数，这样外部传入时也能灵活叠加自己的样式：

@Composable
fun EnableDisableRow(
    // 把title改成接受Modifier的Composable函数
    title: @Composable (Modifier) -> Unit,
    modifier: Modifier = Modifier,
    status: @Composable () -> Unit = {},
    onEnableClick: () -> Unit,
    onDisableClick: () -> Unit,
) {
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 直接把weight修饰符传给title
        title(Modifier.weight(1f))
        // 其他代码
    }
}

// 调用示例
EnableDisableRow(
    title = { modifier ->
        Text("示例标题", modifier = modifier)
    },
    onEnableClick = {},
    onDisableClick = {}
)

二、统一设置内部Text的颜色 #

要让title里的所有Text自动用上指定颜色，不用改外部传入的title实现，用CompositionLocalProvider覆盖LocalTextStyle就行：

@Composable
fun EnableDisableRow(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    status: @Composable () -> Unit = {},
    onEnableClick: () -> Unit,
    onDisableClick: () -> Unit,
) {
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(modifier = Modifier.weight(1f)) {
            // 覆盖局部文本样式，让内部所有Text继承指定颜色
            CompositionLocalProvider(
                LocalTextStyle provides LocalTextStyle.current.copy(
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            ) {
                title()
            }
        }
        // 其他代码
    }
}

这样不管title里有多少个Text，都会自动用onSurfaceVariant颜色；如果title里的Text自己显式设置了color，会优先用显式设置的值，不会被覆盖。

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