Compose Appbar 与活动内容重叠

Question

我仍在学习撰写。在我构建的这个原型中，我的包含卡片视图的列（在本例中为 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) {

      }
     }

Answer 1

您可以使用innerPadding，

 Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(
                    ...
                )
            },
            navigationIcon = {
                IconButton(onClick = { }) {
                    Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu Icon" )
                }
            },
            backgroundColor = colorResource(id = R.color.purple_200),
            contentColor = Color.White,
            elevation = 12.dp
        )
    },

){
    innerPadding ->
    Box(modifier = Modifier.padding(innerPadding)){
        DiaryCard()
    }
}