ConstraintLayout 中的 ConstraintLayout 在 Jetpack Compose 中不起作用

Question

我有两个组件 Brand 和 SignInCreateAccount。 ConstraintLayout 创建的每个组件。现在，我从上面的组件创建WelcomeScreen。

用例 1：WelcomeScreen 仍然使用 ConstraintLayout（ConstraintLayout 内 ConstraintLayout）

@Composable
fun WelcomeScreen(modifier: Modifier = Modifier) {

    ConstraintLayout {
        val (brand, formSignIn) = createRefs()

        Brand(modifier = modifier.constrainAs(brand) {
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            top.linkTo(parent.top)
        })

        SignInCreateAccount(modifier = modifier.constrainAs(formSignIn) {
            start.linkTo(brand.start)
            end.linkTo(brand.end)
            top.linkTo(brand.bottom)
        })
    }
}

结果：布局预览不显示任何内容

用例 2：WelcomeScreen 使用 Column(ConstrantLayout 内 Column)

@Composable
fun WelcomeScreen(modifier: Modifier = Modifier) {

    Column {
        Brand()
        SignInCreateAccount()
    }
}

结果：布局预览显示预期结果

品牌和 SignInCreateAccount 组件

@Composable
fun SignInCreateAccount(modifier: Modifier = Modifier) {
    ConstraintLayout {
        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)
        })
    }
}

@Composable
fun Brand(modifier: Modifier = Modifier) {
    ConstraintLayout {
        val (logo, slogan) = createRefs()

        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 Logo(
    modifier: Modifier = Modifier,
    lightTheme: Boolean = MaterialTheme.colors.isLight
) {
    val assetId = if (lightTheme) {
        R.drawable.ic_logo_light
    } else {
        R.drawable.ic_logo_dark
    }

    Image(
        painter = painterResource(id = assetId),
        modifier = modifier,
        contentDescription = null
    )
}

我想使用ConstraintLayout（作为爱好）作为用例1。但我不知道我做错了什么或者ConstraintLayout有什么问题。

更新：我错过了内部约束布局的修饰符参数。然而，另一个问题出现了。该布局重新排列正确，但没有显示任何内容：文本、图像。

WelcomeScreen.kt

@Composable
fun WelcomeScreen(modifier: Modifier = Modifier) {

    ConstraintLayout(modifier = modifier) {
        val (brand, formSignIn) = createRefs()

        Brand(modifier = modifier.constrainAs(brand) {
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            top.linkTo(parent.top)
        })

        SignInCreateAccount(modifier = modifier.constrainAs(formSignIn) {
            start.linkTo(brand.start)
            end.linkTo(brand.end)
            top.linkTo(brand.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)
        })
    }
}

@Composable
fun Brand(modifier: Modifier = Modifier) {
    ConstraintLayout(modifier = modifier) {
        val (logo, slogan) = createRefs()

        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 Logo(
    modifier: Modifier = Modifier,
    lightTheme: Boolean = MaterialTheme.colors.isLight
) {
    val assetId = if (lightTheme) {
        R.drawable.ic_logo_light
    } else {
        R.drawable.ic_logo_dark
    }

    Image(
        painter = painterResource(id = assetId),
        modifier = modifier,
        contentDescription = null
    )
}

@Preview
@Composable
fun DevPreview() {
    JetsurveyTheme(darkTheme = false) {
        WelcomeScreen()
    }
}

Answer 1

您没有将修饰符参数传递给内部约束布局（Brand 和 SignInCreateAccount 中的那些），因此您从 WelcomeScreen 对它们设置的所有约束都不会传递，因此不会传递出现在屏幕上。

例如，您的 Brand 可组合应该是这样的：

@Composable
fun Brand(modifier: Modifier = Modifier) {
    ConstraintLayout(modifier = modifier) {
        val (logo, slogan) = createRefs()

        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)
            })
    }
}

SignInCreateAccount 看起来像这样

@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)
        })
    }
}