https://kotlinlang.org logo
#compose
Title
# compose
u

Uchenna Okoye

02/16/2023, 4:59 PM
Hi all, I am software engineer at Google specializing in Compose Layouts. We just recently landing an experimental API for Flow layouts and many of you have already started working with it. Currently we only support main axis arrangement in the form of horizontalArrangement in Flow Row and verticalArrangement in FlowColumn. We are looking to also support cross axis arrangement and would like to get feedback on the community on preferred naming conventions. Here is a document I wrote up. Feel free to comment on this thread or the document with your thoughts. Thank you! https://docs.google.com/document/d/e/2PACX-1vTywxWWgJFoqjVLudq8el1hHZcOt5Yx6GooD1vSYFFVqyxMw99r-YwUfpzjO9iAFIVveLbDkDx50_HX/pub
🎉 10
Essentially, TLDR: we are looking at two different naming conventions for Flow Layouts: Naming convention: verticalArrangement/horizontalArrangement/verticalAlignment vs. mainAxisArrangement/crossAxisArrangement/alignItems
a

Alejandro Rios

02/16/2023, 5:06 PM
FYI: the document is not shared
c

Casey Brooks

02/16/2023, 5:08 PM
I like the first option better, using vertical/horizontal alignment/arrangement. It’s easier to understand what it refers to, even if you don’t really understand the difference between arrangement and alignment, because horizontal/vertical helps you know what direction it’s referring to. Plus, it keeps the similarity with existing layouts. I also just don’t like the names of “main/cross axis” and “alignItems”, which seems to be insipred by Flexbox. But I’ve never felt comfortable with that naming, as I have to mentally convert the same property name to multiple different things, depending on whether the flow is vertical or horizontal
u

Uchenna Okoye

02/16/2023, 5:11 PM
@Alejandro Rios can you please request access and I can share it with you.
a

Alejandro Rios

02/16/2023, 5:12 PM
I thought it was public, also, I'm agree with @Casey Brooks comment, first option is easier to understand
u

Uchenna Okoye

02/16/2023, 5:15 PM
There is no way for me to share the doc publicly sadly, but happy to share per request.
Thanks for the feedback @Casey Brooks and @Alejandro Rios. We had initially thought it would be confusing to have both verticalArrangement and verticalAlignment in the same API. But I can see your point on keeping the existing layouts between Row and FlowRow similar.
c

Casey Brooks

02/16/2023, 5:25 PM
A follow-up question (for simplicity, I’ll just refer to horizontal flow): would the `crossAxisArrangement`/`verticalArrangement` property basically be like the spacing/placement of each line? Maybe keep horizontalArrangement and verticalAlignment for similarity to
Row { }
, but change that third property to
lineSpacing
,
linePlacement
,
lineArrangement
or something along those lines, to avoid confusion?
u

Uchenna Okoye

02/16/2023, 5:57 PM
CrossAxisArrangement supports the same behaviors that Arrangement does but on the cross axis. So essentially: spaceAround, spaceBetween, spacedBy, Top, Bottom, Start, Top (depending on whether you are FlowRow or FlowColumn -- so crossAxisArrangment in FlowRow has Vertical arrangement possibilities such as top, center or bottom)
f

Francesc

02/16/2023, 6:45 PM
if this change is just for the Flow layouts, then it wouldn't make sense to use a different nomenclature than what's currently in use for
Row
,
Column
and others, it would be inconsistent to name these
mainAxis
and
crossAxis
while the others are named something else
l

Lucas Kivi

02/16/2023, 7:06 PM
mainAxis
and
crossAxis
require me to think a little bit about which axis they are referring to given the layout. The second option is self-explanatory. I can use all of that saved effort to introduce bugs to other parts of my app.
u

Uchenna Okoye

02/16/2023, 7:15 PM
Thanks for all the feedback. We also considered
overflowArrangement
instead of
crossAxisArrangement/verticalArrangement
. This would refer to the arrangement across the overflow of rows/columns. Curious if this is a bit clearer than having
verticalArrangement
and
verticalAlignment
in the same API?
4 Views