kotlin 构成元素不重叠

xxls0lw8  于 2022-11-30  发布在  Kotlin
关注(0)|答案(2)|浏览(198)

我尝试重叠两个不同的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修饰符。

hgncfbus

hgncfbus1#

如果希望Box的子对象覆盖其后面的同级对象,则应将其放在代码的最后一部分

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {

    Box(
        modifier = Modifier.background(Color.Red).size(150.dp)
    )

    // your Toast
    Box(
        modifier = Modifier.background(Color.Green).size(80.dp)
    )
}

如果我把绿色的方块放在红色的方块前面

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {

    // your Toast
    Box(
        modifier = Modifier.background(Color.Green).size(80.dp)
    )

    Box(
        modifier = Modifier.background(Color.Red).size(150.dp)
    )
}

绿色的盒子会藏在红色的盒子后面

w1jd8yoj

w1jd8yoj2#

你可以把吐司放在代码的底部,因为在编写中顺序很重要:

@Composable
fun Registration(navController: NavController, registrationViewModel: RegistrationViewModel) {
    Scaffold() {
        Box() {
            Column() {
                //my other screen components
            }
            MyToast(
                title = "Invalid pin, please try again"
            )
        }
    }
}

或者,您可以保持原样,但将zIndex添加到吐司:

@Composable
fun MyToast(title: String) {
    Card(
        modifier = Modifier
            .absoluteOffset(x = 0.dp, y = 40.dp)
            .zIndex(10f) // add z index here
            .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)
            )
        }
    }

}

注意Card可组合中的高程与XML中的高程不同,因此不会使顶部的可组合,它只会添加阴影,但如果要为可组合提供更高的z阶,请使用Modifier.zIndex(10f)

相关问题