约束约束内部布局 约束布局在 Jetpack Compose 中不起作用

Question

我有两个组件品牌和SignInCreateAccount。每个组件都是由＜code＞ConstraintLayout＜/code＞创建的。现在，我从上面的组件创建＜code＞WelcomeScreen＜/code＞。

用例1:使用静态< code>ConstraintLayout(在< code>ConstraintLayout内的< code>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＜代码＞使用＜代码＞列＜代码＞（＜代码＞列＜代码＞内的＜代码＞ConstrantLayout＜代码＜）

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

    Column {
        Brand()
        SignInCreateAccount()
    }
}

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

品牌和SignInCreate帐户组件

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

我想使用< code>ConstraintLayout(作为爱好)作为用例1。但是我不知道我做错了什么还是< code>ConstraintLayout有问题。

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

< code>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 对它们设置的所有约束都不会传递，因此不会显示在屏幕上。

例如，您的品牌可组合应该像这样：

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

而signcreateAccount将如下所示

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