HRow to centre align

[fred-bowker]

Hi, first let me say thanks for creating the library.
One thing It seems to be missing is a way to center horizontally items within the HFlow. items can be aligned to the right or left but not to the centre

[tevelee]

Hey @fred-bowker, thanks for starting this thread! It's a rewarding project. I always think the behavior is well defined and mostly done, but then people like yourself come up with all sorts of innovative ideas for me to implement.

In my mental model, the layout is always leading aligned and flows as text is laid out in a book. It can appear left or right aligned (depending on the layout direction, right-to-left or left-to-right). I haven't come across a use-case so far for center aligned rows, but it might make sense. If you need such a feature, it's quite straightforward to implement, I can make it work for the next release of the library. The question is how the API should look like, might just be a new property.

Note: I should mention, alignment is already a thing. Just like HStack, HFlow can take a VerticalAlignment. Similarly VFlow – just like VStack – can specify a HorizontalAlignment. Both of them are .center by default. Although this aligns items on the perpendicular axis, not the axis of the flow.

[fred-bowker]

Hi, thanks for your reply it's appreciated, my understanding is that the HRow takes a verticalAlignment and the VRow takes a horizontalAlignment. I think this is what you mean when you say aligns against the perpendicular axis. I found your library as I was looking for a SwiftUI alternative to the FlowRow in jetpack compose, the way that it handles the alignment is that it allows you to pass both a horizontal and a vertical alignment:

FlowRow( horizontalArrangement = Arrangement.spacedBy(7.5.dp, Alignment.CenterHorizontally), verticalArrangement = Arrangement.spacedBy(7.5.dp, Alignment.CenterVertically), ) {

so as you suggest the api takes a new property,

[tevelee]

I've implemented it in 2.5.0 🎉
Please check out the new initializer which takes both a horizontal and a vertical alignment + spacing.

[fred-bowker]

This is great, thanks heaps for getting this change in

[tevelee]

I'm glad you like it. Let me know if it works for your use-case as you expected.

[younky-yang]

var body: some View {
ScrollView(){
VStack(alignment: .leading){
HFlowLayout(horizontalAlignment: .leading, verticalAlignment: .top){
ForEach(wordsList, id:.0){word in
OrderWordView(word: word.0, count: word.1).tag(word.0).frame(width: 40, height: 40)
.border(.blue)
}
}
.frame(width: 280)
.border(.green)
}
.frame(width: 300)
.border(.black)
}
.border(.red)

with above code, I always get all the items aligned center which is not what I want