Jetpack Compose中嵌套ConstraintLayout无法正常显示内容如何解决？

核心问题原因 #

你的代码核心错误是重复复用同一个Modifier实例给不同层级组件绑定约束：

• Jetpack Compose中的Modifier是不可变类型，每调用一次修饰符方法都会生成新的实例
• 你将组件入参的Modifier既用来给内层ConstraintLayout根容器绑定父布局约束，又直接复用它给内部子组件做constrainAs约束绑定，导致约束信息冲突，最终所有子组件测量尺寸为0，内容无法显示

具体错误点 #

以Brand组件为例：你把父层传入的、已经绑定了外层ConstraintLayout约束的modifier，直接拿来给内部的Logo、Text组件调用constrainAs，相当于给同一个Modifier实例叠加了两层完全冲突的约束规则，SignInCreateAccount组件存在同样的问题。

修复方案 #

所有组件的入参Modifier仅传给当前组件的根容器，内部子组件使用独立的全新Modifier做约束绑定即可：

@Composable
fun Brand(modifier: Modifier = Modifier) {
    // 入参modifier仅传给根ConstraintLayout，用于响应父布局约束
    ConstraintLayout(modifier = modifier) {
        val (logo, slogan) = createRefs()
        // 内部子组件使用全新的Modifier做约束绑定，不要复用入参modifier
        Logo(modifier = Modifier.constrainAs(logo) {
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            top.linkTo(parent.top)
        })
        Text(
            text = stringResource(id = R.string.app_tagline),
            modifier = Modifier.constrainAs(slogan) {
                start.linkTo(logo.start)
                end.linkTo(logo.end)
                top.linkTo(logo.bottom)
            }
        )
    }
}

@Composable
fun SignInCreateAccount(modifier: Modifier = Modifier) {
    ConstraintLayout(modifier = modifier) {
        val (titleSignIn, email, buttonContinue, titleOr, buttonSignGuest) = createRefs()
        Text(
            text = stringResource(id = R.string.sign_in_create_account),
            modifier = Modifier.constrainAs(titleSignIn) {
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                top.linkTo(parent.top)
            })
        Text(text = "... Enter your mail", modifier = Modifier.constrainAs(email) {
            start.linkTo(titleSignIn.start)
            end.linkTo(titleSignIn.end)
            top.linkTo(titleSignIn.bottom)
        })
    }
}

WelcomeScreen无需修改，修复后嵌套ConstraintLayout即可正常显示内容。

补充说明 #

ConstraintLayout嵌套本身没有兼容问题，可以正常使用，只需遵守Modifier的使用规则即可：不要跨层级复用同一个Modifier实例，每个组件的入参Modifier仅作用于该组件的根容器。

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