Home > Enterprise >  How to declare padding for custom layout in Jetpack Compose 1.2.0
How to declare padding for custom layout in Jetpack Compose 1.2.0

Time:06-01

In version 1.2.0 of Jetpack Compose a padding parameter is being asked for by the Scaffold, content section.

How do I declare padding values in this section, when they have already been specified in my custom LazyColumn? All I get is paddp.

Content padding parameter it is not used

Scaffold(
    topBar = { MyLargeTopAppBar(title = "Hello Android") },
    content = { MyLazyColumn(lazyItems = arrayOf(...)) }
)

@Composable
fun MyLazyColumn(lazyItems: Array<Items>
) {
    LazyColumn(
        contentPadding = PaddingValues(top = 8.dp, bottom = 8.dp)
    ) {

    }
}

CodePudding user response:

There's no need to pass Scaffold content padding into LazyColumn.contentPadding, because this padding gonna be covered by the Scaffold bar anyway, and you don't need your cells to be drawn under the bar. So same as with any other view, you can use Modifier.padding:

Scaffold(
    topBar = { MyLargeTopAppBar(title = "Hello Android") },
    content = { MyLazyColumn(lazyItems = arrayOf(...), modifier = Modifier.padding(it)) }
)

@Composable
fun MyLazyColumn(lazyItems: Array<Items>, modifier: Modifier) {
    LazyColumn(
        contentPadding = PaddingValues(top = 8.dp, bottom = 8.dp),
        modifier = modifier
    ) {

    }
}

CodePudding user response:

You can always pass modifier in composable constructor from where you call your composable. And also add what ever you want above that modifier you passed in the constructor.

to fix this you can change your Composable like this

@Composable
fun MyLazyColumn(
    modifier: Modifier,
    lazyItems: Array<Items>
) {
    LazyColumn(
        modifier = modifier,
        contentPadding = PaddingValues(top = 8.dp, bottom = 8.dp)
    ) {

    }
}

Then you can call your composable in Scaffold and pass that padding to your Composable constructor

Scaffold(
    topBar = { MyLargeTopAppBar(title = "Hello Android") },
    content = {
        MyLazyColumn(
            Modifier.padding(it),
            lazyItems = arrayOf(...)
        )
    }
)
  • Related