MAUI技术问询：运行Activity Indicator时如何锁定Flyout菜单

要实现ActivityIndicator运行时锁定Flyout菜单、阻止用户切换页面的需求，核心思路是通过绑定控制FlyoutPage的交互状态，结合异步计算逻辑确保UI响应正常。以下是具体实现步骤：

1. 视图层（XAML）配置 #

在你的FlyoutPage根节点，绑定IsEnabled属性到ViewModel的忙碌状态（注意需要反向转换，因为忙碌时要禁用页面），同时给ActivityIndicator绑定相同的忙碌状态：

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:YourAppNamespace"
            x:Class="YourAppNamespace.MainFlyoutPage"
            IsEnabled="{Binding IsBusy, Converter={StaticResource InverseBooleanConverter}}">

    <!-- Flyout菜单区域 -->
    <FlyoutPage.Flyout>
        <!-- 你的菜单布局内容 -->
    </FlyoutPage.Flyout>

    <!-- 主内容页 -->
    <FlyoutPage.Detail>
        <ContentPage BindingContext="{StaticResource MainViewModel}">
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <ActivityIndicator IsRunning="{Binding IsBusy}"
                                  IsVisible="{Binding IsBusy}"
                                  Color="#007AFF"
                                  HeightRequest="40" WidthRequest="40" />
                <Button Text="启动计算" 
                        Command="{Binding StartCalculationCommand}"
                        Margin="0,20,0,0" />
            </StackLayout>
        </ContentPage>
    </FlyoutPage.Detail>
</FlyoutPage>

2. 实现反向布尔转换器 #

因为我们需要当IsBusy为true时，FlyoutPage的IsEnabled为false，所以需要一个反向布尔转换器：

namespace YourAppNamespace
{
    public class InverseBooleanConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value is bool boolVal && !boolVal;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value is bool boolVal && !boolVal;
        }
    }
}

然后在App.xaml或页面的资源字典中注册转换器：

<Application.Resources>
    <ResourceDictionary>
        <local:InverseBooleanConverter x:Key="InverseBooleanConverter" />
        <local:MainViewModel x:Key="MainViewModel" />
    </ResourceDictionary>
</Application.Resources>

3. ViewModel层逻辑 #

定义忙碌状态属性和异步计算命令，确保计算前后切换忙碌状态，且计算逻辑异步执行避免阻塞UI：

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;

namespace YourAppNamespace
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private bool _isBusy;
        public bool IsBusy
        {
            get => _isBusy;
            set
            {
                _isBusy = value;
                OnPropertyChanged();
            }
        }

        public ICommand StartCalculationCommand => new Command(async () => await StartCalculationAsync());

        private async Task StartCalculationAsync()
        {
            IsBusy = true;
            try
            {
                // 替换为你的实际耗时计算逻辑
                await Task.Delay(5000);
                
                // 计算完成后的后续操作
            }
            finally
            {
                IsBusy = false;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

额外说明 #

• 使用IsEnabled而非直接控制FlyoutIsPresented的原因：前者会彻底禁用FlyoutPage的所有交互（包括滑动打开菜单、点击菜单按钮等），锁定效果更彻底。
• 必须用异步逻辑：如果计算是同步的，UI会被阻塞，ActivityIndicator无法正常显示，用户体验极差。
• 若使用MVVM框架（如CommunityToolkit.Mvvm），可通过ObservableObject简化INotifyPropertyChanged的实现，代码会更简洁。

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