我尝试重叠两个不同的compose
元素。我想在顶部显示一个toast
类型的消息,每当有一个错误消息。我不想使用第三方库这样一个简单的用例。我计划在每个其他可组合屏幕中使用toast
来显示错误消息。下面是我想要实现的布局
所以我想实现吐司消息说“无效的PIN,请重试”。
@Composable
fun MyToast(title: String) {
Card(
modifier = Modifier
.absoluteOffset(x = 0.dp, y = 40.dp)
.background(
color = MaterialTheme.colors.primaryVariant,
shape = RoundedCornerShape(10.dp)
), elevation = 20.dp
) {
Row(
modifier = Modifier
.background(color = MaterialTheme.colors.primaryVariant)
.padding(12.dp),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(id = R.drawable.error_circle),
contentDescription = title
)
Text(
text = title,
fontFamily = FontFamily(Font(R.font.inter_medium)),
fontSize = 12.sp,
color = MaterialTheme.colors.primary,
modifier = Modifier.padding(horizontal = 10.dp)
)
}
}
}
我的屏幕组合如下
@Composable
fun Registration(navController: NavController, registrationViewModel: RegistrationViewModel) {
Scaffold() {
Box(){
MyToast(
title = "Invalid pin, please try again"
)
Column() {
//my other screen components
}
}
}
稍后我将向MyToast可组合对象添加AnimatedVisibility修饰符。
2条答案
按热度按时间hgncfbus1#
如果希望
Box
的子对象覆盖其后面的同级对象,则应将其放在代码的最后一部分如果我把绿色的方块放在红色的方块前面
绿色的盒子会藏在红色的盒子后面
w1jd8yoj2#
你可以把吐司放在代码的底部,因为在编写中顺序很重要:
或者,您可以保持原样,但将zIndex添加到吐司:
注意:
Card
可组合中的高程与XML
中的高程不同,因此不会使顶部的可组合,它只会添加阴影,但如果要为可组合提供更高的z阶,请使用Modifier.zIndex(10f)