如何在Jetpack Compose中为自定义Composable设置对齐方式？

问题核心在于你定义的content参数类型是普通的@Composable () -> Unit，它没有绑定Box的作用域上下文，所以编译器识别不出这是在Box内部执行的lambda，自然无法使用Modifier.align这类依赖父布局作用域的扩展函数。

修复方法 #

把ColoredBackgroundBox的content参数类型改成@Composable BoxScope.() -> Unit——这正是Jetpack Compose中Box组件自身接收的content参数类型，这样lambda会自动继承Box的作用域上下文，Modifier.align就能正常使用了。

修改后的代码示例 #

@Composable
fun ColoredBackgroundTextBox(text: String, color: Color) {
    ColoredBackgroundBox(content = {
        Text(text, modifier = Modifier.align(Alignment.Center))
    }, color = Color.Gray, width = 200, height = 30)
}

@Composable
fun ColoredBackgroundBox(
    content: @Composable BoxScope.() -> Unit,
    color: Color,
    width: Int,
    height: Int
) {
    Box(modifier = Modifier.size(width.dp, height.dp).background(color)) {
        content()
    }
}

原理说明 #

BoxScope是Jetpack Compose为Box布局提供的作用域接口，里面定义了Modifier.align这类需要依赖父布局上下文的扩展函数。当你把content参数声明为BoxScope.() -> Unit时，就相当于告诉编译器：这个lambda必须在BoxScope的上下文里执行，所以lambda内部就能直接调用Box相关的扩展函数了。

这样既保留了你想要的组件封装性，不用把所有逻辑堆到一起，又解决了上下文识别的问题，代码依然整洁易维护。

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