Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I specify an exact amount of spacing between children in a Jetpack Compose Column?

I am trying to create a Column in Jetpack Compose with a specific amount of spacing between each child element, such as 10.dp. In SwiftUI, this is relatively simple. I would just create a VStack with a spacing value:

struct ContentView: View {
    let strings = ["Hello", "World", "Apples"]

    var body: some View {
        VStack(spacing: 10) {
            ForEach(strings, id: \.self) { string in
                Text(string).background(Color.green)
            }
        }
        .background(Color.blue)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

This is what it looks like in a SwiftUI Preview:

enter image description here

In Jetpack Compose, my code is:

@Composable
fun ContentView() {
    val strings = listOf<String>("Hello", "World", "Apples")

    MaterialTheme {
        Surface(color = MaterialTheme.colors.background) {
            Column(
                modifier = Modifier
                    .background(Color.Blue)
                    // I would expect to be able to add something like ".spacer(10.dp)" here
            ) {
                strings.forEach { string ->
                    Text(
                        modifier = Modifier.background(Color.Green),
                        text = string
                    )
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ContentView()
}

Because this code is missing any spacing, this is what it currently looks like:

enter image description here

My criteria are:

  • A space of a specific height (such as 10.dp) should be present between child elements of a Column.
  • The space should not appear before the first element.
  • The space should not appear after the last element.

I would use a Spacer element, but I don't believe this would work, because in a for loop, I believe I would end up having a Spacer either before the first or after the last element, which I do not want.

like image 752
Eugene Avatar asked Jun 30 '21 18:06

Eugene


People also ask

What is a modifier in jetpack compose?

Modifiers allow you to decorate or augment a composable. Modifiers let you do these sorts of things: Change the composable's size, layout, behavior, and appearance. Add information, like accessibility labels.

How is a LazyColumn different than a regular Column?

As the name suggests, the difference between LazyColumn and LazyRow is the orientation in which they lay out their items and scroll. LazyColumn produces a vertically scrolling list, and LazyRow produces a horizontally scrolling list. The Lazy components are different to most layouts in Compose.

What is row layout in jetpack compose?

Row Layout in Jetpack Compose. Row Layout in Jetpack Compose. During the previous lesson we discuss about column layout. Column layout had 6 vertical arrangements and 3 horizontal alignments. Similarly, Row layout has 6 horizontal arrangements and 3 vertical alignments.

What is the column composable in jetpack?

The Column Composable provides us with the functionality of displaying a collection of composables in a vertically sequenced format, where each composable is displayed simultaneously one after the other. If you’re enjoying my posts on Jetpack Compose, check out some details on the book I’m writing on Compose!

What are the different types of arrangement and alignments in jetpack?

As you might have already guessed horizontal arrangements would be Start, Center, End, SpaceEvenly, SpaceAround and SpaceBetween. Vertical alignments would be Top, CenterVertically and Bottom. Arrangements and alignments in jetpack compose layouts.

How much space do the row and column composables take up?

Both the Row and Column composables will occupy an area of space within the user interface layout depending on child elements, other composables, and any size-related modifiers that may have been applied.


Video Answer


1 Answers

Use Arrangement.spacedBy

Column(
    modifier = Modifier
        .background(Color.Blue),
    verticalArrangement = Arrangement.spacedBy(10.dp)
) {
    // content here
}

enter image description here

like image 111
Francesc Avatar answered Nov 01 '22 00:11

Francesc