kotlin 编写应用栏与活动内容重叠

b91juud3  于 7个月前  发布在  Kotlin
关注(0)|答案(4)|浏览(78)


的数据
我还在学习compose.in这个原型im buiding,我的列包含卡的意见,在这种情况下1哑卡,是重叠的appbar。我已经尝试使用脚手架太,同样的结果
这是卡的代码:

@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)
       }

       }
   }
}

字符串
Appbar:

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

      }
     }

hs1rzwqc

hs1rzwqc1#

自Compose 1.2.0以来,它需要使用padding参数,传入Scaffold内容组合。您应该将其应用于内容中最顶层的容器/视图

@Composable
fun MainScreen() {
    Scaffold(topBar = { AppBar() }) {
        Surface(modifier = Modifier
            .fillMaxSize()
            .padding(it)) // Add this to fix it
         {
            Content()
        }
    }
}

字符串

ddrv8njm

ddrv8njm2#

从我的代码中附加代码片段

Scaffold(
            topBar = {Top(onNavigationIconClick = {scope.launch {drawerState.open()}})},
            bottomBar = { Bottom(navController = navController) },
            content= {
                Column(modifier = Modifier.padding(it)) { // THE MODIFIER PARAMETER DOES THE MAGIC
                    Navigation(navController)
                }
            }
        )

字符串

eiee3dmh

eiee3dmh3#

你可以使用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()
    }
}

字符串

zaqlnxep

zaqlnxep4#

您可以:

  • 使用topBar = { topAppbar() }添加Scaffold
  • 添加一个Column()来 Package 卡片的所有内容

比如说:

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")
    }
}


的数据

相关问题