Colton Idle
07/26/2023, 7:05 PMFrancesc
07/26/2023, 7:55 PMonPlaced
and get the width of the parent
• use a Layout
• use a BoxWithConstraints
if you just want to wrap to the 2nd (or 3rd or ...) row, there is also FlowRow
(or something along those lines)
There are probably other solutions besides theseAlex Vanyo
07/26/2023, 8:11 PMFlowRow
!Francesc
07/26/2023, 8:14 PMFlowRow
separately (as that draws additional rows), but if that's the intention, then it's definitively the simplest solutionColton Idle
07/26/2023, 9:07 PMColton Idle
07/26/2023, 9:08 PMFrancesc
07/26/2023, 9:21 PMFlowRow
is to wrap whatever doesn't fit, so it wouldn't make sense to allow limiting to 1 row. Looks like you'll have to build your own solution here.Francesc
07/26/2023, 9:29 PMonPlaced
is easy enough to use
private val ItemDimension = 128.dp
val colors = listOf(
Color.Red,
Color.Green,
Color.Blue,
Color.Cyan,
Color.Magenta,
)
@Preview(widthDp = 420)
@Composable
fun FitsN() {
WeatherSampleTheme {
Surface(
color = MaterialTheme.colorScheme.background
) {
val density = LocalDensity.current
val itemWidthPx = with(density) { ItemDimension.toPx() }
var items by remember {
mutableIntStateOf(0)
}
Row(
modifier = Modifier
.fillMaxWidth()
.onPlaced { layoutCoordinates ->
items = (layoutCoordinates.size.width / itemWidthPx).toInt()
},
horizontalArrangement = Arrangement.SpaceEvenly,
) {
repeat(items) {
Item(
index = it,
modifier = Modifier.size(ItemDimension)
)
}
}
}
}
}
@Composable
fun Item(
index: Int,
modifier: Modifier = Modifier,
) {
Box(
modifier = modifier.background(
color = colors[index % colors.size]
),
contentAlignment = Alignment.Center,
) {
Text(text = "Item $index")
}
}
Francesc
07/26/2023, 11:11 PMLayout
. It uses central alignment, it could easily be extended to allow configuring how the additional space is distributed, similar to how row and column behave
https://gist.github.com/fvilarino/da067aca6f079e720e07d9f2a76b2315Colton Idle
07/26/2023, 11:40 PMAlbert Chang
07/27/2023, 4:02 AMonPlaced
because it will result in both bad performance and bad UX. See this thread.Colton Idle
07/27/2023, 5:36 AMLayout
instead (but the onPlaced code is so easy to read 😭 )Francesc
07/27/2023, 5:45 AMonPlaced
does not imply bad performance, if your layout is not changing, then it's fine to use. If you are aware of the delay you can always not draw anything until the size is known with a simple if
check. For simple cases, onPlaced
is a good enough solutionColton Idle
07/27/2023, 5:50 AMFrancesc
07/27/2023, 5:51 AMColton Idle
07/27/2023, 5:51 AMColton Idle
07/27/2023, 5:52 AMFrancesc
07/27/2023, 5:52 AMColton Idle
07/27/2023, 5:53 AMColton Idle
07/27/2023, 5:54 AMFrancesc
07/27/2023, 5:55 AMAlbert Chang
07/27/2023, 5:55 AMFlowRow
is implemented.Colton Idle
07/27/2023, 5:55 AMColton Idle
07/27/2023, 5:56 AMFrancesc
07/27/2023, 5:56 AMFrancesc
07/27/2023, 5:59 AMColton Idle
07/27/2023, 5:59 AMColton Idle
07/27/2023, 6:08 AMBoxWithConstraints{
val internalItemSize = 48.dp
val howManyCanFit: Float = this.maxWidth.value/internalItemSize.value
val rows = 2
val columns: Int = howManyCanFit.roundToInt()
FlowRow(
modifier = Modifier.padding(4.dp),
horizontalArrangement = Arrangement.spacedBy(4.dp),
maxItemsInEachRow = columns
) {
val itemModifier = Modifier
.padding(vertical = 4.dp)
.size(internalItemSize)
.background(Color.Blue)
repeat(rows * columns) {
Spacer(modifier = itemModifier)
}
}
Colton Idle
07/27/2023, 6:39 AMannsofi
07/27/2023, 7:29 AMColton Idle
07/27/2023, 7:33 AMColton Idle
07/28/2023, 2:24 PM