MAUI中如何让HorizontalStackLayout内BindableLayout子项横向拉伸？

问题原因 #

HorizontalStackLayout的布局逻辑决定了它仅会尊重**与布局方向相反（垂直方向）**的拉伸设置，横向方向上它只会根据子项自身的固有尺寸排列，不会分配剩余空间给子项，所以你设置的HorizontalOptions="FillAndExpand"不会生效。

推荐方案 #

方案一：使用FlexLayout（最简便） #

FlexLayout支持通过FlexLayout.Grow属性让子项自动均分剩余空间，完美适配动态数据源的场景：

修改后的XAML代码：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutStretchTest.MainPage">

    <VerticalStackLayout>
        <!-- 替换HorizontalStackLayout为FlexLayout -->
        <FlexLayout
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            BackgroundColor="Green"
            Direction="Row"
            Wrap="NoWrap">
            <BindableLayout.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Baboon</x:String>
                    <x:String>Capuchin Monkey</x:String>
                    <x:String>Blue Monkey</x:String>
                    <x:String>Squirrel Monkey</x:String>
                    <x:String>Golden Lion Tamarin</x:String>
                    <x:String>Howler Monkey</x:String>
                    <x:String>Japanese Macaque</x:String>
                </x:Array>
            </BindableLayout.ItemsSource>
             <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding .}"
                        VerticalOptions="FillAndExpand"
                        HorizontalTextAlignment="Center"
                        TextColor="White"
                        BackgroundColor="DarkBlue"
                        <!-- 添加Grow属性让子项均分横向空间 -->
                        FlexLayout.Grow="1"/>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
        <VerticalStackLayout HorizontalOptions="FillAndExpand"
                             VerticalOptions="FillAndExpand">
            <Label Text="Text"
                   HorizontalTextAlignment="Center"
                   TextColor="Black"
                   BackgroundColor="White"/>
        </VerticalStackLayout>
    </VerticalStackLayout>
</ContentPage>

关键设置：

• FlexLayout.Direction="Row"：保持横向布局逻辑
• FlexLayout.Grow="1"：每个Label会按比例填充剩余的横向空间，所有子项设置为1时会均分空间

方案二：使用Grid（适用于需要精确控制列宽的场景） #

如果需要更精细的列宽控制，可以用Grid配合动态生成列定义：

1. 在后台代码中根据数据源数量生成等宽列：

public MainPage()
{
    InitializeComponent();
    var monkeyList = new List<string>
    {
        "Baboon", "Capuchin Monkey", "Blue Monkey",
        "Squirrel Monkey", "Golden Lion Tamarin",
        "Howler Monkey", "Japanese Macaque"
    };
    // 为每个子项生成一个宽度为*的列
    foreach (var _ in monkeyList)
    {
        MonkeyGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
    }
    BindableLayout.SetItemsSource(MonkeyGrid, monkeyList);
}

2. 修改XAML：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutStretchTest.MainPage">

    <VerticalStackLayout>
        <Grid x:Name="MonkeyGrid"
              HorizontalOptions="FillAndExpand"
              VerticalOptions="FillAndExpand"
              BackgroundColor="Green">
             <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding .}"
                        VerticalOptions="FillAndExpand"
                        HorizontalTextAlignment="Center"
                        TextColor="White"
                        BackgroundColor="DarkBlue"/>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </Grid>
        <VerticalStackLayout HorizontalOptions="FillAndExpand"
                             VerticalOptions="FillAndExpand">
            <Label Text="Text"
                   HorizontalTextAlignment="Center"
                   TextColor="Black"
                   BackgroundColor="White"/>
        </VerticalStackLayout>
    </VerticalStackLayout>
</ContentPage>

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