如何在.NET MAUI中父布局完成后根据父高度设置子元素高度？

1. 用LayoutChanged事件替代OnSizeAllocated #

OnSizeAllocated会在布局测量阶段多次触发，此时父元素的尺寸尚未最终确定，拿到的高度可能是临时值。而LayoutChanged事件是在整个布局排列完成后触发的，此时所有元素的最终尺寸都已稳定，适合用来调整子元素的尺寸。

实现步骤：

• 在XAML中给父布局命名（比如ParentGrid）
• 在页面的OnAppearing方法中订阅父布局的LayoutChanged事件
• 在事件处理逻辑中获取父元素的最终高度，再设置子元素的尺寸

示例代码：

protected override void OnAppearing()
{
    base.OnAppearing();
    ParentGrid.LayoutChanged += ParentGrid_LayoutChanged;
}

private void ParentGrid_LayoutChanged(object sender, EventArgs e)
{
    // 若只需调整一次，取消订阅避免重复触发
    ParentGrid.LayoutChanged -= ParentGrid_LayoutChanged;

    // 获取父布局的最终高度
    var parentFinalHeight = ParentGrid.Height;
    // 设置子元素高度为父高度减去指定值（比如比父元素低50）
    TargetElement.HeightRequest = parentFinalHeight - 50;
}

protected override void OnDisappearing()
{
    // 取消订阅防止内存泄漏
    ParentGrid.LayoutChanged -= ParentGrid_LayoutChanged;
    base.OnDisappearing();
}

2. 解决底部导航栏遮挡内容的问题 #

优先用布局容器自动适配，而非手动计算高度：

优雅方案：Grid分栏布局

用Grid将内容和导航栏放在不同行，内容行占满剩余空间，导航栏行自适应高度，自动避免遮挡：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <!-- 内容区域自动避开导航栏 -->
    <ScrollView Grid.Row="0">
        <!-- 你的页面内容 -->
    </ScrollView>

    <!-- 底部导航栏 -->
    <CustomNavBar Grid.Row="1" />
</Grid>

如果必须用ZIndex层级叠加的方式，再通过LayoutChanged调整内容的底部边距：

private void ParentGrid_LayoutChanged(object sender, EventArgs e)
{
    ParentGrid.LayoutChanged -= ParentGrid_LayoutChanged;
    // 获取导航栏的实际高度
    var navBarHeight = CustomNavBar.Height;
    // 给内容元素设置底部边距，避免被遮挡
    ContentElement.Margin = new Thickness(0, 0, 0, navBarHeight);
}

补充说明 #

• 如果需要实时响应父布局尺寸变化（比如屏幕旋转），不要取消LayoutChanged的订阅，而是在事件中每次重新计算尺寸
• 尽量优先使用MAUI自带的布局系统（Grid、StackLayout等）的自适应能力，减少手动计算高度的场景，避免布局异常

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