.NET MAUI中HorizontalStackLayout内Entry无法占满宽度问题

问题根源 #

1. VerticalStackLayout未占满父容器宽度：嵌套的VerticalStackLayout默认HorizontalOptions为Start，没有填充Grid分配的全部可用宽度，导致内部的HorizontalStackLayout和Entry无法真正拉伸到100%宽度。
2. ListView布局位置错误：未给ListView指定Grid的行和列跨度，它会默认覆盖在Grid的起始位置，挤压下方表单布局的空间，同时造成布局重叠。

修复后的代码 #

<Grid RowDefinitions="Auto,20,20,Auto,*" Padding="10" ColumnDefinitions="*,*">
    <Label Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Text="8901 PKR" BackgroundColor="Maroon" TextColor="White" VerticalTextAlignment="Center"></Label>
    <Label Grid.Row="0" Grid.Column="1" Text="5032 PKR" BackgroundColor="Maroon" TextColor="White" VerticalTextAlignment="Center"></Label>
    <Label Grid.Row="1" Grid.Column="1" Text="5032 PKR" BackgroundColor="Maroon" TextColor="White" VerticalTextAlignment="Center"></Label>
    <Label Grid.Row="2" Grid.Column="1" Text="5032 PKR" BackgroundColor="Maroon" TextColor="White" VerticalTextAlignment="Center"></Label>
    <!-- Form layout -->
    <VerticalStackLayout Grid.Row="3" Grid.ColumnSpan="2" HorizontalOptions="Fill">
        <!-- Account Type Row -->
        <HorizontalStackLayout Padding="0,10,0,10" HorizontalOptions="Fill">
            <Label Text="Account Type" VerticalTextAlignment="Center" WidthRequest="100"></Label>
            <Entry Text="Account Type" HorizontalOptions="FillAndExpand"></Entry>
        </HorizontalStackLayout>

        <!-- Expense Type Row -->
        <HorizontalStackLayout HorizontalOptions="Fill">
            <Label Text="Expense Type" VerticalTextAlignment="Center" WidthRequest="100"></Label>
            <Entry Text="Expense Type" HorizontalOptions="FillAndExpand"></Entry>
        </HorizontalStackLayout>

        <!-- Amount Row -->
        <HorizontalStackLayout HorizontalOptions="Fill">
            <Label Text="Total" VerticalTextAlignment="Center" WidthRequest="100"></Label>
            <Entry Text="" HorizontalOptions="FillAndExpand"></Entry>
        </HorizontalStackLayout>

        <!-- Description Row -->
        <HorizontalStackLayout HorizontalOptions="Fill">
            <Label Text="Description" VerticalTextAlignment="Center" WidthRequest="100"></Label>
            <Entry Text="Descr" HorizontalOptions="FillAndExpand"></Entry>
        </HorizontalStackLayout>

        <!-- Submit Button -->
        <Button Text="Submit" HorizontalOptions="Fill"></Button>
    </VerticalStackLayout>
    <ListView Grid.Row="4" Grid.ColumnSpan="2">
        
    </ListView>
</Grid>

关键修改说明 #

• 给VerticalStackLayout添加HorizontalOptions="Fill"，确保它占满Grid的全部宽度，让内部控件有足够的拉伸空间。
• 调整Grid的RowDefinitions，新增*行用于放置ListView，避免布局重叠。
• 给ListView设置Grid.Row="4"和Grid.ColumnSpan="2"，指定它在Grid中的正确位置。
• 修正了Amount行Label的拼写错误（"Tota"改为"Total"）。

内容的提问来源于stack exchange，提问作者Muhammad Faizan Khan