I'm trying to use a FlowRow with a list of start-a...
# compose
t
I'm trying to use a FlowRow with a list of start-aligned items which are followed by a list of end-aligned items (which should be contiguous). In a regular row I'd do this by adding a Spacer with a weight in between both lists, but for a FlowRow this only works as long as the spacer and trailing items are in the same "virtual" row. Code and visualisations in the 🧵
Copy code
@OptIn(ExperimentalLayoutApi::class)
@Composable
fun FlowRowTest(itemCount: Int, trailingCount: Int, modifier: Modifier = Modifier) {
    FlowRow(modifier = modifier) {
        repeat(itemCount) {
            Item(Color.White)
        }

        // Is normally a spacer
        Item(
            color = Color.Red,
            modifier = Modifier.weight(1.0f)
        )

        Row {
            repeat(trailingCount) {
                Item(Color.Blue)
            }
        }
    }
}

@Composable
private fun Item(color: Color, modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .size(40.dp)
            .padding(all = 2.dp)
            .background(color)
    )
}
And both cases (white is the first list, red is the spacer and blue is the trailing list):
In the first preview I'd like to somehow make sure that the blue items are end-aligned, preferably without having to write a custom layout. Does anyone have any ideas whether this is (easily) possible? I might just be overlooking a simple solution
For future reference, this seems to do the trick for the minimal example I have here:
Copy code
@OptIn(ExperimentalLayoutApi::class)
@Composable
fun FlowRowTest(itemCount: Int, trailingCount: Int, modifier: Modifier = Modifier) {
    FlowRow(modifier = modifier) {
        repeat(itemCount) {
            Item(Color.White)
        }

        Row(Modifier.weight(1.0f)) {
            Spacer(modifier = Modifier.weight(1.0f))

            repeat(trailingCount) {
                Item(Color.Blue)
            }
        }
    }
}
🙌 1
jetpack compose 1
a
Thank you for sharing this!
👍 1