如何在 Xamarin 中从 ViewModel 创建警报弹出窗口？

Question

我正在使用 MVVM 模式开发 Xamarin 应用程序。我想在用户按下按钮时向用户显示警报。

我声明我的 ViewModel

class MainPageViewModel : BindableBase   {

不幸的是，我无法Page直接从 ViewModel 中访问对象。我如何最好地显示我的警报？

Answer 1

虽然迟到了，但正如 Nick Turner 在许多评论中提到的那样，到目前为止给出的解决方案要求视图模型引用视图，这是 MVVM 的反模式/侵权。此外，您会在视图模型单元测试中遇到错误，例如：您必须调用 Xamarin.Forms.Init(); 在使用它之前。

相反，您可以创建一个包含警报框代码的界面，然后在视图模型中使用，如下所示：

界面：

public interface IDialogService
{ 
    Task ShowAlertAsync(string message, string title, string buttonLabel); 
}

实现（使用 ACR.UserDialogs NuGet 包）：

public class DialogService : IDialogService
{
    public async Task ShowAlertAsync(string message, string title, string buttonLabel)
    {
        if (App.IsActive)
            await UserDialogs.Instance.AlertAsync(message, title, buttonLabel);            
        else
        {
            MessagingCenter.Instance.Subscribe<object>(this, MessageKeys.AppIsActive, async (obj) =>
            {
                await UserDialogs.Instance.AlertAsync(message, title, buttonLabel);
                MessagingCenter.Instance.Unsubscribe<object>(this, MessageKeys.AppIsActive);
            });
        }
    }
}

视图模型：

public class TestViewModel
{    
    private readonly IDialogService _dialogService;

    public TestViewModel(IDialogService dialogService)
    {
         //IoC handles _dialogService implementation
         _dialogService = dialogService ?? throw new ArgumentNullException(nameof(dialogService));
    }

    public ICommand TestCommand => new Command(async () => await TestAsync());

    private async Task TestAsync()
    {
        await _dialogService.ShowAlertAsync("The message alert will show", "The title of the alert", "The label of the button");
    }
}

然后可以将 TestCommand 绑定到 xaml 中的按钮：

<Button x:Name="testButton" Command="{Binding TestCommand}">

Answer 2

要显示，Alert请在 ViewModel 类中写入以下代码

public class MainViewModel
{
    public ICommand ShowAlertCommand { get; set; }
    public MainViewModel()
    {
        ShowAlertCommand = new Command(get => MakeAlter());
    }
    void MakeAlter()
    {
        Application.Current.MainPage.DisplayAlert("Alert", "Hello", "Cancel", "ok");
    }
}

在 xaml 中设置Command为Button

<StackLayout>
<Button Text="Click for alert" Command="{Binding ShowAlertCommand}"
   HorizontalOptions="Center"
   VerticalOptions="CenterAndExpand" />
</StackLayout>

BindingContext在 xaml 文件后面的代码中设置。如果你的xaml文件MainPage.xaml

public MainPage()
{
    InitializeComponent();
    BindingContext = new MainViewModel();

}