如何让HorizontalStackLayout实现内容自动换行显示？

HorizontalStackLayout本身不支持自动换行，它的设计目标是单行横向排列元素，超出容器宽度的内容会被截断。要实现元素自动换行的效果，你可以用以下两种替代方案：

1. 使用WrapLayout（推荐，.NET MAUI 7+） #

WrapLayout是专门为流式换行布局设计的控件，直接替换原有的HorizontalStackLayout即可，用法和BindableLayout完全兼容：

<WrapLayout Grid.Column="1" BindableLayout.ItemsSource="{Binding DisplayedUserActions}" Margin="10"
            HorizontalSpacing="5" VerticalSpacing="5">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Border BackgroundColor="White" HeightRequest="150" MinimumWidthRequest="180" Margin="0">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="20,20,20,20"/>
                </Border.StrokeShape>
                <Grid RowDefinitions="*,*">
                    <Border Grid.Row="0" StrokeThickness="2" Stroke="lightgray" BackgroundColor="AliceBlue" Margin="2">
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="20,20,20,20"/>
                        </Border.StrokeShape>
                    </Border>
                    <Label Grid.Row="1" VerticalOptions="Center" HorizontalOptions="Center" Text="{Binding Title}" TextColor="Black"></Label>
                </Grid>
            </Border>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</WrapLayout>

说明：

• 可以通过HorizontalSpacing和VerticalSpacing控制元素间的间距，替代原Border的Margin避免重复间距
• 元素会在容器宽度不足时自动换行到下一行

2. 使用FlexLayout（更灵活的布局选择） #

FlexLayout通过设置Wrap="Wrap"属性实现换行，同时支持更多布局对齐控制：

<FlexLayout Grid.Column="1" BindableLayout.ItemsSource="{Binding DisplayedUserActions}" Margin="10"
            Wrap="Wrap" AlignItems="Start" JustifyContent="Start"
            HorizontalSpacing="5" VerticalSpacing="5">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Border BackgroundColor="White" HeightRequest="150" MinimumWidthRequest="180" Margin="0">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="20,20,20,20"/>
                </Border.StrokeShape>
                <Grid RowDefinitions="*,*">
                    <Border Grid.Row="0" StrokeThickness="2" Stroke="lightgray" BackgroundColor="AliceBlue" Margin="2">
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="20,20,20,20"/>
                        </Border.StrokeShape>
                    </Border>
                    <Label Grid.Row="1" VerticalOptions="Center" HorizontalOptions="Center" Text="{Binding Title}" TextColor="Black"></Label>
                </Grid>
            </Border>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

说明：

• Wrap="Wrap"开启自动换行
• AlignItems控制垂直方向对齐方式，JustifyContent控制水平方向排列方式，可根据需求调整

内容的提问来源于stack exchange，提问作者Holunk