[英]ConstraintLayout inside ConstraintLayout not working in Jetpack Compose
I've two components Brand
and SignInCreateAccount
.我有两个组件
Brand
和SignInCreateAccount
。 Each component created by ConstraintLayout
. ConstraintLayout
创建的每个组件。 Now, I create WelcomeScreen
from above components.现在,我从上面的组件创建
WelcomeScreen
。
Usecase 1: WelcomeScreen
using still ConstraintLayout
( ConstraintLayout
inside ConstraintLayout
)用例 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)
})
}
}
Result: Layout preview not show anything结果:布局预览不显示任何内容
Usecase 2: WelcomeScreen
using Column
( ConstrantLayout
inside Column
)用例2:
WelcomeScreen
使用Column
( ConstrantLayout
内Column
)
@Composable
fun WelcomeScreen(modifier: Modifier = Modifier) {
Column {
Brand()
SignInCreateAccount()
}
}
Result: Layout preview show expected result结果:布局预览显示预期结果
Brand and SignInCreateAccount components Brand 和 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
)
}
I want to using ConstraintLayout
(as hobby) as use case 1. But I don't know what I did wrong or is there something wrong with ConstraintLayout
.我想使用
ConstraintLayout
(作为爱好)作为用例 1。但我不知道我做错了什么或者ConstraintLayout
有什么问题。
You are not passing the modifier parameter to the inner constraint layouts (ones in Brand
and SignInCreateAccount
), so all the constraints you set on them from the WelcomeScreen
don't get passed along, and therefore not appearing on the screen.您没有将修饰符参数传递给内部约束布局(在
Brand
和SignInCreateAccount
),因此您从WelcomeScreen
对它们设置的所有约束都不会传递,因此不会出现在屏幕上。
For example your Brand
composable should like something like this:例如,您的
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)
})
}
}
And the SignInCreateAccount
would look like this 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)
})
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.