.NET MAUI中HorizontalStackLayout与横向StackLayout布局效果不一致问题

问题背景 #

使用HorizontalStackLayout时，无法复现设置了Orientation="Horizontal"和HorizontalOptions="FillAndExpand"的StackLayout的布局效果——两个Entry无法平分容器的横向空间。

原可行代码（StackLayout） #

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
    <Entry x:Name="InfoNombre" Placeholder="Nombre" Text="{Binding EditorPerfil.conta.InfoNombre}"  HorizontalOptions="FillAndExpand"/>
    <Entry x:Name="InfoApellido" Placeholder="Apellido" Text="{Binding EditorPerfil.conta.InfoApellido}"  HorizontalOptions="FillAndExpand"/>
</StackLayout>

问题代码（HorizontalStackLayout） #

<HorizontalStackLayout  HorizontalOptions="FillAndExpand"> <!--使用HorizontalOptions="Fill"结果一致-->
    <Entry x:Name="InfoNombre" Placeholder="Nombre" Text="{Binding EditorPerfil.conta.InfoNombre}"  HorizontalOptions="FillAndExpand"/>
    <Entry x:Name="InfoApellido" Placeholder="Apellido" Text="{Binding EditorPerfil.conta.InfoApellido}"  HorizontalOptions="FillAndExpand"/>
</HorizontalStackLayout>

差异原因 #

StackLayout在横向模式下，会将容器的剩余横向空间按比例分配给所有设置了FillAndExpand的子元素；而HorizontalStackLayout的布局逻辑更偏向紧凑排列，默认不会主动将剩余空间分配给子元素，即使子元素设置了FillAndExpand，也无法自动触发平分空间的行为。

解决方案 #

推荐方案：改用 Grid 布局（最稳定） #

通过Grid的星号宽度定义，实现子元素平分横向空间，适配容器宽度变化：

<Grid HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Entry x:Name="InfoNombre" 
           Placeholder="Nombre" 
           Text="{Binding EditorPerfil.conta.InfoNombre}" 
           HorizontalOptions="FillAndExpand"
           Grid.Column="0"/>
    <Entry x:Name="InfoApellido" 
           Placeholder="Apellido" 
           Text="{Binding EditorPerfil.conta.InfoApellido}" 
           HorizontalOptions="FillAndExpand"
           Grid.Column="1"/>
</Grid>

备选方案：强制 HorizontalStackLayout 分配空间 #

若坚持使用HorizontalStackLayout，可通过绑定子元素宽度到容器宽度的一半（需处理容器边距/间距），但这种方式灵活性较差：

<HorizontalStackLayout x:Name="HStack" HorizontalOptions="FillAndExpand" Spacing="0">
    <Entry x:Name="InfoNombre" 
           Placeholder="Nombre" 
           Text="{Binding EditorPerfil.conta.InfoNombre}" 
           WidthRequest="{Binding Source={x:Reference HStack}, Path=Width, Converter={StaticResource HalfWidthConverter}}"/>
    <Entry x:Name="InfoApellido" 
           Placeholder="Apellido" 
           Text="{Binding EditorPerfil.conta.InfoApellido}" 
           WidthRequest="{Binding Source={x:Reference HStack}, Path=Width, Converter={StaticResource HalfWidthConverter}}"/>
</HorizontalStackLayout>

注：需自定义HalfWidthConverter来计算宽度的一半，同时要扣除可能的间距、内边距等，实现复杂度较高。

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