MAUI中TabbedPage嵌套ScrollView在Windows平台的滚动异常问题

问题概述 #

仅在Windows平台下，当ContentPage嵌套于TabbedPage中时，内部的ScrollView会出现滚动异常：页面有时可正常滚动，有时无法滚动到底部；调整应用窗口大小后，ScrollView会重新计算状态，但结果随机出错（比如滚动条尺寸异常、滚动范围不足）。

复现步骤 #

• 创建包含ScrollView的ContentPage：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageScrollViewIssue.MyChildPage"
             Title="MyChildPage">
    <ScrollView>
        <StackLayout>
            <Label Text="Label 1" />
            <Label Text="Label 2" />
            <Label Text="Label 3" />
            <Label Text="Label 4" />
            <Label Text="Label 5" />
            <Label Text="Label 6" />
            <Label Text="Label 7" />
            <Label Text="Label 8" />
            <Label Text="Label 9" />
            <Label Text="Label 10" />
            <Label Text="Label 11" />
            <Label Text="Label 12" />
            <Label Text="Label 13" />
            <Label Text="Label 14" />
            <Label Text="Label 15" />
        </StackLayout>
    </ScrollView>
</ContentPage>

• 创建TabbedPage并添加上述ContentPage：

public class MyTabbedPage : TabbedPage
{
    public MyTabbedPage()
    {
        Children.Add(new MyChildPage());
    }
}

• 将MainPage设置为该TabbedPage实例
• 缩小应用高度至仅显示Label 1-10，尝试滚动时只能到Label 11；调整窗口宽度后，滚动条尺寸变化，有时无法滚动到底部，有时又恢复正常

临时修复方案 #

以下方案基于官方修复思路，强制触发ScrollView的布局重新计算，避免嵌套场景下的布局计算错误：

方案1：自定义Windows平台ScrollViewHandler #

创建针对Windows平台的自定义ScrollViewHandler，监听布局变化并强制刷新：

using Microsoft.Maui.Handlers;
using Microsoft.UI.Xaml.Controls;

namespace YourAppNamespace.Platforms.Windows
{
    public class FixedScrollViewHandler : ScrollViewHandler
    {
        protected override void ConnectHandler(ScrollViewer platformView)
        {
            base.ConnectHandler(platformView);
            platformView.SizeChanged += OnSizeChanged;
        }

        protected override void DisconnectHandler(ScrollViewer platformView)
        {
            platformView.SizeChanged -= OnSizeChanged;
            base.DisconnectHandler(platformView);
        }

        private void OnSizeChanged(object sender, Microsoft.UI.Xaml.SizeChangedEventArgs e)
        {
            VirtualView?.InvalidateMeasure();
            VirtualView?.InvalidateArrange();
        }
    }
}

在MauiProgram.cs中注册该Handler：

builder.ConfigureMauiHandlers(handlers =>
{
#if WINDOWS
    handlers.AddHandler<ScrollView, FixedScrollViewHandler>();
#endif
});

方案2：在ContentPage中手动触发布局刷新 #

在MyChildPage.xaml.cs中重写OnSizeAllocated方法，强制刷新ScrollView布局：

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    MyScrollView?.InvalidateMeasure();
    MyScrollView?.InvalidateArrange();
}

同时在XAML中给ScrollView命名：

<ScrollView x:Name="MyScrollView">
    <!-- 原有内容 -->
</ScrollView>

方案3：调整布局约束 #

确保ScrollView和内部布局设置正确的布局选项，避免布局计算歧义：

<ScrollView VerticalOptions="Fill" HorizontalOptions="Fill">
    <VerticalStackLayout VerticalOptions="Fill">
        <!-- 原有Label内容 -->
    </VerticalStackLayout>
</ScrollView>

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