https://kotlinlang.org logo
Join Slack
Powered by
In the new `Grid` layout, doesn’t ```repeat(3) { ...
# compose
a
In the new 
Grid
layout, doesn’t
Copy code
repeat(3) {
   column(1.fr)
}
mean that each column will have identical width (assuming all content fits)?
Or do they get space proportional to their intrinsic size?
For me it looks like this, which is surprising:
These are two 3x1 grids, with the same total width
c
I think your “problem” is the 
Scan Resolution
- this one is bigger than 1/3. so the grid uses up the space for its “required” size and the first 2 columns get the rest to fill both of their 1fr’s. The first 2 have the same width, right?
a
I don’t think so. Here, I’ve made everything shorter:
The texts have no padding, and there’s clearly enough space.
They’re all slightly different width, too.
I’ve no idea what’s causing it.
c
what are the “children”/items of the grid - Plain 
Text
?
a
A 
Column
with two `Text`s
A 2x1 grid works fine:
Although no, the 2x1's are also slightly different
c
yes, the first items seems smaller.
a
Copy code
@OptIn(ExperimentalGridApi::class)
@Composable
fun App() {
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Grid(
            config = {
                repeat(3) {
                    column(1.fr)
                }
            },
            Modifier.fillMaxWidth()
        ) {
            Cell("Short")
            Cell("MediumLength")
            Cell("Supercalifragilisticexpialidocious")
        }
    }
}

@OptIn(ExperimentalGridApi::class)
@Composable
fun GridScope.Cell(text: String) {
    Text(
        text = text,
        textAlign = TextAlign.Center,
        modifier = Modifier
            .gridItem(alignment = Alignment.Center)
            .fillMaxSize()
            .border(1.dp, Color.Black)
    )
}
image.png
Hmm, maybe that’s a bad example
image.png
Ah, I think I know what’s going on
👀 1
It’s distributing the remaining space (sans the text) equally.
But I’ve no idea why
Like the space between the side of the text and the nearest border - those are all the same
😅 1
c
did you try without 
gridItem(alignment = Alignment.Center)
a
Same thing
t
Did you try to use 
.3.f
rather than 
1.fr
? 
fr
is the remaining space after the other elements are calculated (from the documentation Flexible (Fr): Distributes remaining space proportionally after fixed and percentage tracks are calculated. For example, if two rows are set to 1.fr and 3.fr, the latter receives 75% of the remaining height. - https://developer.android.com/develop/ui/compose/layouts/adaptive/grid/container-properties) If you want them equal, the easiest way is to use the Percentage approach
a
It’s the same with 
<http://0.33.fr|0.33.fr>
t
Wait, there is a difference between 
.3.f
and 
.3.fr
. the final R is what changes the behavior
Without the final 
r
it should divide the space evenly.
3 columns with 
1.fr
will do in this way: the first one will calculate its size and take all of it, let's say 30% of all the available space because it's short. The second's 
1.fr
will be calculated against the remaining of the space (100-30-> 70%). And so on. the 
.fr
calculate the remaining space after the others before get their sizes
If you want them equal, you need to remove the 
r
, that will use the percentage
a
Well, sure, if I give it a percentage, that will work.
t
If you find any unexpected behavior, please either tag me or file a bug ❤️
a
That is unexpected behavior…
the first one will calculate its size and take all of it, let’s say 30% of all the available space because it’s short.
That doesn’t seem right. Why would it take 30%?
How is the “30” calculated?
The way I understand it is that first the fixed and percentage item widths are finalized. Then, the remaining width (after subtracting those) is distributed among the 
fr
ones, each receiving space proportional to its value. Basically like weight in a row.
The only exception (as documented) is if the content is larger than the flex width assigned to it. But this isn’t the case in my example.
So, for example an item with 
<http://2.fr|2.fr>
should receive twice the width than a 
<http://1.fr|1.fr>
item. Two 
<http://1.fr|1.fr>
items should receive the same width.
From the page you linked:
• *Flexible*(
Fr
): Distributes remaining space proportionally after fixed and percentage tracks are calculated. For example, if two rows are set to`1.fr`and`3.fr`, the latter receives 75% of the remaining height.
But what seems to be happening in actuality is that only the empty space (after subtracting the intrinsic width of the flex items too!) is distributed according to the value.
k
You can use 
column(1f / 3f)
for equal widths
4 Views
Open in Slack
PreviousNext
Powered by