Android 组成不重叠的元素

我正在try 重叠两个不同的compose元素.每当出现错误消息时，我都希望在顶部显示toast类消息.对于如此简单的用例，我不想使用第三方库.我计划在所有其他可组合屏幕中使用toast来显示错误消息.下面是我想要实现的布局

所以我想要实现一条 cogo 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
          }  
        }
}

稍后我会将AnimatedVisibility修改器添加到MyToast Composable中.首先，我需要将我的Toast覆盖在所有其他元素上，但不知何故，我的Toast是不可见的