Compose Appbar 重叠活动内容答案

【问题标题】：Compose Appbar overlaps activity contentCompose Appbar 重叠活动内容
【发布时间】：2021-04-13 18:23:49
【问题描述】：

我还在学习 compose。在这个正在构建的原型中，我的包含卡片视图的列，在这种情况下是 1 个虚拟卡片，与应用栏重叠。我也试过用脚手架，结果一样

这是卡代码：

@Composable
fun DiaryCard(){
val bs = "filler text,strings,anything "+
        "jadsjjadj adsnjasjd d saasd" +" sadsad asdasd adsasda" +
        "sasdasdas dsa d"



   Column {
   
   Spacer(modifier = Modifier.padding(top = 6.dp))
   Card(modifier = Modifier
       .fillMaxWidth()
       .padding(13.dp),
       shape = MaterialTheme.shapes.small,
       elevation = 5.dp, backgroundColor = Color.White){


       Row(modifier = Modifier.padding(bottom = 2.dp)){

           Text(text = "29 Sept. 2019", modifier = Modifier
               .fillMaxWidth(0.75F)
               .padding(start = 1.5.dp),color = Color.Black)



       }
       Divider()
       Spacer(modifier = Modifier.padding(bottom = 3.dp,top = 2.dp))
       Column(modifier = Modifier.fillMaxWidth()) {
           Text(text = "today was a good day",color = Color.Black)
           Spacer(modifier = Modifier.padding(bottom = 3.dp))
           Text(text = bs, color = Color.Black)
       }

       }
   }
}

应用栏：

    @Composable
     fun topAppbar(){
       TopAppBar(backgroundColor = Color.DarkGray) {

      }
     }

【问题讨论】：

标签： android kotlin android-jetpack-compose

【解决方案1】：

你可以：

添加Scaffold 和topBar = { topAppbar() }
添加Column() 来包装卡片的所有内容

类似：

Scaffold(topBar = { topAppbar() },
) {
    DiaryCard()
}

与：

@Composable
fun DiaryCard(){

    val bs = "filler text,strings,anything "+
            "jadsjjadj adsnjasjd d saasd" +" sadsad asdasd adsasda" +
            "sasdasdas dsa d"

    Column {

        Spacer(modifier = Modifier.padding(top = 6.dp))
        Card(
            modifier = Modifier
                .fillMaxWidth()
                //.background(Color.Red)
                .padding(13.dp),
            shape = MaterialTheme.shapes.small,
            elevation = 5.dp, backgroundColor = Color.White
        ) {
            Column() { //It is important to avoid overlap inside the Card

                Row(modifier = Modifier.padding(bottom = 2.dp)) {

                    Text(
                        text = "29 Sept. 2019", modifier = Modifier
                            .fillMaxWidth(0.75F)
                            .padding(start = 1.5.dp), color = Color.Black
                    )


                }
                Divider()
                Spacer(modifier = Modifier.padding(bottom = 3.dp, top = 2.dp))
                Column(modifier = Modifier.fillMaxWidth()) {
                    Text(text = "today was a good day", color = Color.Black)
                    Spacer(modifier = Modifier.padding(bottom = 3.dp))
                    Text(text = bs, color = Color.Black)
                }

            }
        }
    }
}

和：

@Composable
fun topAppbar(){

    TopAppBar(backgroundColor = Color.DarkGray) {
        Text("AppBar")
    }
}

【讨论】：