xamarin - 如何使 ActivityIndi​​cator 覆盖全屏？

Question

我有一个 堆栈布局以及内部的许多元素(按钮、文本等)。
我想要 事件指示器 覆盖整个屏幕并使其无法对这些元素执行任何操作。
我已经把事件指示器 内堆栈布局但是用 AbsoluteLayout 包装它，认为 AbsoluteLayout 可以轻松地重叠所有内容:

<StackLayout>
    <AbsoluteLayout>
        <ActivityIndicator ... />
    </AbsoluteLayout>
    <...other elements...> 
</StackLayout>

相反，事件指示器显示在 StackLayout 的顶部，其他元素可用于影响。我是 Xamarin 和布局的新手，我做错了什么？互联网上的所有样本每页都有一个 ActivityIndi​​cator...

Answer 1

最好说一个 AbsoluteLayout的 child 可以很容易地相互重叠。就像 StackLayout允许您在 AbsoluteLayout 内垂直或水平堆叠控件允许您使用绝对值或比例值在内部定位控件，因此如果两个控件具有相同的绝对定位设置，它们将重叠 100%。

因此，您要包装您的 StackLayout和另一个 StackLayout有你的 ActivityIndicator在 AbsoluteLayout 内使用比例尺码，例如:

<AbsoluteLayout>
    <StackLayout
        x:Name="mainLayout"
        AbsoluteLayout.LayoutBounds="0,0,1,1"
                 AbsoluteLayout.LayoutFlags="All" >
        <Label Text="Welcome to Xamarin.Forms!"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        <Button Text="Do Something"
                Clicked="DoSomethingBtn_Clicked" />
    </StackLayout>
    <StackLayout
        x:Name="aiLayout"
        IsVisible="False"
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        AbsoluteLayout.LayoutFlags="All"
        BackgroundColor="Gray" Opacity="0.5">
        <ActivityIndicator
            x:Name="ai"
            IsRunning="False"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Color="Black"/>
    </StackLayout>

</AbsoluteLayout>

以上设置了两个 StackLayouts两者都占据了 AbsoluteLayout 的父容器的完整大小，这大概是一个 Page。 StackLayout最初隐藏指标的那个。在上面例子后面的页面代码中，我显示了第二个 StackLayout并启动事件指示器并显示 2 秒钟，然后再次隐藏它:

    private async void DoSomethingBtn_Clicked(object sender, EventArgs e)
    {
        ai.IsRunning = true;
        aiLayout.IsVisible = true;
        await Task.Delay(2000);
        aiLayout.IsVisible = false;
        ai.IsRunning = false;

    }

这是它的样子:



从第二个 StackLayout完全覆盖第一个，第一个 StackLayout 中没有任何控件是可点击的。

可能值得阅读 AbsoluteLayout 的文档以了解 AbsoluteLayout.LayoutBounds 和 AbsoluteLayout.LayoutFlags:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout