Difference Between Expanded and LayoutSize.Expand for Column and Row in Jetpack Compose

user_9199362 0
Viewed 2152

I was trying Jetpack Compose on Android Studio Canary 1 and I added Column composable to the ui. Column has one property called modifier in which we can pass different modifiers. I used Expanded modifier which resulted in Column taking all the available space.

Also, Column has mainAxisSize and crossAxisSize properties so I tried them also and set it to LayoutSize.Expand which is intended to expand the given axis I think. This also resulted in Column taking all the available space. Check out the example below:

1. Using LayoutSize.Expand

Column(mainAxisSize = LayoutSize.Expand,
crossAxisSize = LayoutSize.Expand) {
    Text("Jetpack",modifier = ExpandedHeight)
    Text("Compose",modifier = ExpandedHeight)
}

Output:

enter image description here

2. Using Expanded

Column(modifier = Expanded) {
    Text("Jetpack",modifier = ExpandedHeight)
    Text("Compose",modifier = ExpandedHeight)
}

Output:

enter image description here

Observation is that Both the following code provides the same output. Then what is the difference between Expanded and LayoutSize.Expand when it comes to Column and Row?

android-jetpack-compose android
2 Answers

They are two ways to achieve the same thing:

The Expanded modifier forces a target component to fill all available space. It can be applied to any composable that accepts a modifier.

The mainAxisSize parameter is a way to set the size of the layout, and is a parameter that is specific to Row/Column.

You should use the Expanded modifier. The mainAxisSize parameter is already removed from Column.

user_12440030

On jetpack compose 1.0, Expanded modifier which looks like flutter api is no longer available But you can do it like this.

Row {
    Box(modifier = 
      Modifier.weight(1f).wrapContentWidth(Alignment.Start)) {}
    Box() {}
}

In the first Box composable, the layout is expanded. It's similar to flutter Flex widget if you familiar with flutter.

You can also view the google ref here https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements

user_105563750
Related