从零学习XamarinForms-弹窗视图

手机APP/开发
351
0
0
2022-07-11

一个App怎么少得了与用户进行交互呢,XamarinForms提供了两种与用户进行交互的弹出窗口:警告视图和信息交互视图。通常,它们被用于询问用户完成一些简单的操作,或者指导用户完成一些简单的操作。它们兼容于各个平台,下面分别介绍这两种弹窗。

警告视图,它的使用场景很多,一般来说在某些特定的情况下,需要弹出来一个警告框告诉用户一些重要的信息,以便使用户自行选择是否继续,比如电量不足、余额不足、是否接受邀请等。XamarinForms为警告窗提供了DisplayAlert方法,它的使用可以不受限制,任何场景下都可以调用该方法,但是需要注意的是,它隶属于Page类,也就是说只有在页面内才能使用警告窗。

DisplayAlert有两个重载方法:

(1)DisplayAlert(标题,内容,取消):它包含三个参数,第一个参数表示要显示的弹窗的标题,比如警告;第二个表示将要提示的内容,比如电量不足;第三个参数表示取消的提示语,比如取消/Cancel等。这个方法用于不需要从用户那里收集信息,仅仅是警告一下而已。

(2)DisplayAlert(标题,内容,确定,取消):它包含四个参数,取消按钮始终是最后一个参数,而第三个为确定的提示语,比如好的/OK等。这个方法需要根据用户的点击的按钮不同而进行不同的操作,并非只有警告。注意,后面两个参数的顺序不要搞错了,不然看着会有点别扭,虽然没什么影响,但是强迫症估计受不了的。

那如何使用呢?我们先在代码中放置一个Button按钮,并定义一个Clicked点击事件:

从零学习XamarinForms-弹窗视图

在该页面的cs文件中生成点击事件的方法,并使用async和await关键字,因为弹出窗口会比较耗时,使用异步的原因是为了避免阻塞UI线程,造成卡顿现象,影响用户体验。警告窗返回的是一个bool值,可以根据返回结果进行不同的操作。下面是其代码:

从零学习XamarinForms-弹窗视图

上面代码在弹出警告后,用户点击确定按钮后切换背景颜色,取消按钮则无操作。

为了解决警告视图只有两个按钮的限制,XamarinForms提供了一种信息交互视图,它可以有很多的选项,通常它的使用场景为提示用户进行哪一个操作,然后根据不同的点击进行不同的操作。

提示信息交互视图,这个弹窗本来是iOS中常见的一种UI视图,XamarinForms提供了DisplayActionSheet方法,在Android和WinPhone平台下都进行了渲染,基本上是原生的效果了。同样,它是在任何Page页面中都可以使用的,而且每个选择项上的信息都是string类型。注意,这里有一个限制,就是DisplayActionSheet方法至少需要四个参数,第一个表示标题;第二个表示取消按钮;第三个表示自毁按钮,类似于取消功能,可有可无,可为null;从第四个开始即为选择项,可以有很多,但至少得需要一个。

比如下面的代码中点击按钮后弹出交互窗,提示用户点击后切换背景颜色:

从零学习XamarinForms-弹窗视图