在 Xamarin 表单中加载页面时显示文本

Question

我有一个很重的页面，点击后加载大约 1-2 秒。在此期间，我看到加载页面标题和旧页面内容，它看起来很无响应。只要新页面正在加载，我想要实现的只是显示带有“正在加载...”或活动指示器等内容的临时标签，但我不知道该怎么做。实现这一目标的更好方法是什么？提前致谢

Answer 1

根据您对其他答案的评论 - 而不是 ActivityIndicator - 您可以使用一个简单的框架来覆盖所有布局并使其仅在数据加载时可见，即绑定IsVisible到IsBusy属性。然后IsBusy在执行繁重的工作之前设置为 true，然后再设置为 false，如上一个答案所示。

例如，假设您的 UI 基于网格布局（在此示例中为 3 行/2 列）：

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="auto" />

        <RowDefinition Height="*" />

        <RowDefinition Height="auto" />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="*" />

        <ColumnDefinition Width="*" />

    </Grid.ColumnDefinitions>

    <!-- Some XAML for the grid content -->

    <!-- Here, Frame covers all the possible space defined using RowSpan/ColumnSpan -->

    <Frame Grid.RowSpan="3" Grid.ColumnSpan="2" IsVisible="{Binding IsBusy}" BackgroundColor="LightGray">

       <Label VerticalOptions="Center" HorizontalOptions="Center" Text="Loading Samples..." />

    </Frame>

</Grid>

根据 OP 评论编辑：

根据您提供的代码（下次最好将其粘贴到 SO 中；）），您可以试试这个：

向 xaml 页面添加网格布局和框架：

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MyApp.Namespace"    

             xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"

             xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms" 

             BackgroundColor="#d4d4d4">

    <ContentPage.ToolbarItems>

        <ToolbarItem Icon="search_white_90.png"/>

    </ContentPage.ToolbarItems>

    <ContentPage.Content>

        <Grid>

            <tabView:SfTabView x:Name="ProductsTabView" VisibleHeaderCount="3" TabHeaderBackgroundColor="#A74B40" Items="{Binding}">

                <tabView:SfTabView.SelectionIndicatorSettings>

                    <tabView:SelectionIndicatorSettings

                        Color="#fff" StrokeThickness="3"/>

                </tabView:SfTabView.SelectionIndicatorSettings>

            </tabView:SfTabView>

            <Frame x:Name="theFrame" BackgroundColor="White">

               <Label VerticalOptions="Center" HorizontalOptions="Center" Text="Loading Samples..." />

            </Frame>

        </Grid>

    </ContentPage.Content>

</ContentPage>

ProductsTabView并将theFrame覆盖屏幕上的相同空间，并且框架将在后面的代码中可用。然后，您可以在使用属性之前/之后显示/隐藏 theFrame IsVisible：

public partial class ProviderPage : ContentPage

    {

        public ProviderPage()

        {

            InitializeComponent();            

            theFrame.IsVisible = true; // Show the Frame on top of tabView

            ProductsTabView.Items = GetTabItemCollection();    

            theFrame.IsVisible = false; // Hide the Frame

        }

        ...

作为旁注，您根本不使用ViewModel。我强烈建议您检查 ViewModel 是什么以及如何将它们与 MVVM 模式一起使用。从长远来看，这将使您的生活更轻松Binding！

Answer 2

根据您的评论，您只想在从 API 加载数据时显示忙碌指示符。您没有发布您的用户界面，但我希望您了解如何使用以下内容：

<Grid>

     <YOUR-UI>

         .....

         .........

     </YOUR-UI>

     <ActivityIndicator VerticalOptions="Center" IsVisible="{Binding IsBusy}" IsRunning="{Binding IsBusy}"/>

</Grid>

在您的 ViewModel 中，添加 IsBusy 属性，如下所示：

private bool _isBusy;

public bool IsBusy

{

    get{return _isBusy;}

    set { _isBusy=value; RaisePropertyChanged(); }

}

然后，当您调用 API 加载数据时，请执行以下操作：

public async void LoadDataFromApi()

{

    IsBusy=true;  //Show the Indicator

    var response= await YourService.Method();  //this is where you calling your api

    //do other stuffs if you need to do;

    IsBusy=false;   //Hide the Indicator

}

如果您需要更多帮助，请告诉我。

Answer 3

试试https://github.com/aritchie/userdialogs，让你轻松实现加载

例如：

 using (this.Dialogs.Loading("Loading text"))

    {

         //Do something i.e: await Task.Delay(3000);

    }   

或者

this.Dialogs.ShowLoading("Loading text");

//Do something i.e: await Task.Delay(3000);

this.Dialogs.HideLoading();    

或 https://github.com/aritchie/userdialogs/blob/master/src/Samples/Samples/ViewModels/ProgressViewModel.cs