TabbedPage / ScrollView 问题 - 有时无法滚动

Question

我对 ScrollView 有疑问 - 我相信只有当 ContentPage 托管在 TabbedPage 中时才会出现问题。

有时页面会按预期滚动，有时不会（调整主应用程序的大小会导致它重新计算 ScrollView 的状态，有时是随机的，有时是错误的）。

要重现，请创建一个页面以在选项卡式页面中显示：

<?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：

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

    }
}

将 MainPage 设置为 MyTabbedPage 的新实例。

1. 降低应用程序的高度，以便仅标签 1 到 10 可见。
2. 当我尝试滚动时，我只能向下滚动到标签 11！慢慢地
3. 更改主窗口的宽度 - 您将看到垂直的 滚动条改变大小！有时候太大了，看不到底部 它，在这种情况下你无法滚动到底部，但有时你 可以看到底部有一个间隙，在这种情况下您可以滚动！
4. 页面 现在可以正确地向下滚动到最后一个标签，标签 15！

它应该是这样的：（并且正确地允许滚动）

但是通过改变宽度，它可能会像这样结束，并且不允许滚动到底部：

我已将其记录在 GitHub 上，其他人已经能够重现该问题。但这对于我从 Xamarin Forms 转换的应用程序来说是一个大问题。我无法忍受这种随机行为，所以如果有人有任何解决此问题的建议，我将非常感激！

问题记录在这里： https://github.com/dotnet/maui/issues/26103

Answer 1

让我们用一些数字修改您的代码：

<Grid>
    <ScrollView HeightRequest="200" VerticalOptions="Start">
        <StackLayout>
            <Label Text="Label 1" HeightRequest="50"/>
            <Label Text="Label 2" HeightRequest="50"/>
            <Label Text="Label 3" HeightRequest="50"/>
            <Label Text="Label 4" HeightRequest="50"/>
            <Label Text="Label 5" HeightRequest="50"/>
            <Label Text="Label 6" HeightRequest="50"/>
            <Label Text="Label 7" HeightRequest="50"/>
            <Label Text="Label 8" HeightRequest="50"/>
            <Label Text="Label 9" HeightRequest="50"/>
            <Label Text="Label 10" HeightRequest="50"/>
            <Label Text="Label 11" HeightRequest="50"/>
            <Label Text="Label 12" HeightRequest="50"/>
            <Label Text="Label 13" HeightRequest="50"/>
            <Label Text="Label 14" HeightRequest="50"/>
            <Label Text="Label 15" HeightRequest="50"/>
        </StackLayout>
    </ScrollView>
</Grid>

通过此修改，您将在卷轴中看到 4 个标签。您将能够滚动到底部。

滚动视图的高度是固定的。无论您调整页面大小多少次，它都将保持为 200。如果页面高度较小，例如 100，那么您仍然可以滚动，但您将看不到滚动视图的下半部分。因此，一旦滚动到标签 15，您实际上会看到标签 13。

（滚动视图的底部位于页面底部下方）

这就是你所观察到的。当您调整页面大小时，您假设滚动视图（内容，或说“子视图”）正在随之调整大小。但你离真相已经不能再远了......

重新计算尺寸/位置是有序的。而毛伊岛在这方面实在是太糟糕了。因此，要么使用固定（“魔法”）数字，要么尝试单独调整大小。