带有 Shell 顶部导航的 ActivityIndi​​cator

Posted 2023-04-13

【中文标题】带有 Shell 顶部导航的 ActivityIndi​​cator

【英文标题】：ActivityIndicator with Shell top navigation

【发布时间】：2022-01-14 18:44:36

【问题描述】：

我有一个带有一些 ShellContent 的 shell 导航，并且员工菜单需要很长时间才能加载数据。已经搜索添加ActivityIndi​​cator，但是不知道怎么实现。

<Shell ..>
    <Shell.FlyoutHeader>

                <ActivityIndicator IsRunning="Binding IsBusy"
                                   IsVisible="Binding IsBusy"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   Color="Black" />

    </Shell.FlyoutHeader>

<ShellContent x:Name="home"
Route="main"
ContentTemplate="DataTemplate home:Dashboard" />
</Shell>
<ShellContent x:Name="listEmp"
Route="Employees"
IsVisible="Binding IsEmployees"
ContentTemplate="DataTemplate home:Employees" />
</Shell>

有一个解决方案，我们改变 MenuItem 代替 ContentTemplate：

 <MenuItem Command="Binding LoadEmployeesCmd" />

在 ViewModel 中：

        public ICommand LoadEmployeesCmd=> new Command(() => LoadEmployees());

        private async void LoadEmployees()
        
            IsBusy = true;
            Routing.RegisterRoute(nameof(Views.Employees), typeof(Views.Employees));

          await Shell.Current.GoToAsync("//Employees");

            IsBusy = false;
            Shell.Current.FlyoutIsPresented = false;

        

我正在寻找不将 ShellContent 更改为 MenuItem 的解决方案，因为在 MenuItem 中没有 IsVisible...

【问题讨论】：

this answer 可能会给你一个想法。我不确定如何适应他们的做法，但它可能会让你开始。

【参考方案1】：

您可以将 IsBusy 属性与 AppShell 的 IsBusy 绑定，并在加载方法中更改 AppShell 的 is Busy，例如： AppShell.xmal.cs：

    public AppShell()
    InitializeComponent();
    ...
    BindingContext=this;

视图模型：

  private async void LoadEmployees()
    
    AppShell.Current.IsBusy=true;//change the property

        Routing.RegisterRoute(nameof(Views.Employees), typeof(Views.Employees));

      await Shell.Current.GoToAsync("//Employees");

        AppShell.Current.IsBusy=false;
        Shell.Current.FlyoutIsPresented = false;