What is the best choice for a responsive layout?

[stewartsims]

As I understand it, the 'StackLayout' (HorizontalStackLayout and VerticalStackLayout) in MAUI simply arranges the elements within it to fill the space. So there is no actual 'stacking' that goes on in the sense that if you have a HorizontalStackLayout which has content that does not fit in the screen width, it will not wrap / arrange it's children vertically (like a row/column based responsive layout on the web such as 'Bootstrap').

Is there no equivalent of row/column based responsiveness in MAUI? What would be the best layout option to implement this, or is it simply better not to go with the concept of a responsive wrapping / stacking UI?

In my particular use case we are talking about forms, some sections of which would be nice to have arranged horizontally on tablet and desktop sized devices, but on most phones really only fit vertically. I would have thought this should be straightforward but maybe I am missing something. Thanks in advance for any guidance.

[sjordanGSS]

Have you tried FlexLayout? It'll stack items horizontally/vertically until it runs out of space, and then wrap onto a new row/column.

[stewartsims]

It's possible that might help. To help me can you give a basic example of how I might achieve the following with Flex Layout:

Tablet view:

Label   Label
Field   Field

Mobile view:

Label
Field

Label
Field

[sjordanGSS]

<FlexLayout Wrap="Wrap">
    <VerticalStackLayout>
        <Label />
        <Field />
    </VerticalStackLayout>
    <VerticalStackLayout>
        <Label />
        <Field />
    </VerticalStackLayout>
</FlexLayout>

Something like this? I'm not sure what your Field view is or how it is layed out.
You could also set FlexLayout.Basis, FlexLayout.Shrink and FlexLayout.Grow on the VerticalStackLayouts to change how they'll get sized
The documentation is well worth a read.

[stewartsims]

Thank you, from a bit of initial testing this approach should achieve what I need. I will read the docs further to try and understand how best to use this layout for similar needs going forward.

In addition this has helped me identify an issue with a third party component (that replaces the 'Field' in my example) that seems to break the FlexLayout. I will try and see if they have any of their own documentation to resolve this or switch to an alternative.