×

来扯点ionic3[8] 模态框 Alerts 和 Toast

96
忠叔
2017.12.23 00:57 字数 1798

本系列文集:来扯点ionic3

我们在实现交互设计时,常需要就应用的状态、特定的操作进行必要的提示和反馈,包括提醒用户网络出现故障、某一项输入不合法、某个操作已经生效等等。面对这样的情况,使用模态框是一种常用和便捷的方法。

Alerts 控件


Alerts控件正如我们熟悉的 window.alert 方法一样,是一种强制性的交互控件,它通常用于发出强烈的提示或者警告。使用 Alerts 会打断用户当前的操作,除非用户对Alerts 进行了回应,否则他们将无法操作页面上的任何地方。如此强硬的“手段”,正适合用于处理故障、错误以及某些不合法操作的情况。

引入AlertController

使用 Alerts 控件需要引入 AlertController,方法如同引入 NavController 一样,在页面上方写入 import 语句。

import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';

由于 AlertController 和 AlertController 同属 ionic-angular 这个包,因此一般将它们合并在一行写。

import { NavController, AlertController } from 'ionic-angular';

import 完成后,依然要在构造函数注入一个实例:

constructor(private navCtrl:NavController,private alertCtrl:AlertController){}

创建一个 Alerts

通过引入的 AlertController 实例,你可以在方法中创建一个 alert 控件,以登录方法为例,当我们判断到用户的密码不正确时,就创建一个 alert 来提醒用户:

let alert = this.alertCtrl.create({
        title:'提示信息',
    subTitle:'用户名和密码错误',
    buttons:['确定']
})

AlertController 的 create 方法接收一个对象参数,这个对象向 create 方法提供了创建的选项:

  1. title:一个字符串,Alerts的标题;
  2. subTitle: 一个字符串,Alerts的副标题,也是更加详细的提示内容;
  3. buttons:按钮的文字,由于 Alerts 可以放置多个按钮,所以它是一个数组。
    这三个内容都是可选的,当然在实际使用中,你得保证 title 和 subTitle 至少有一个,并且按钮也至少有一个,不然这个 Alerts 似乎没法正常使用。


    如果这些选项都没有,就会出现这个一个“怪物”

创建完的 Alerts 并不会直接显示,你需要通过 present 方法让它显示出来。

alert.present();

当你把这段代码放到业务逻辑中时,就能得到这样的效果


动图:提醒密码错误

多按钮的 Alerts 控件

Alerts 除了能实现这种单一的警告或提示,也可以向用户提供更多的操作选项,我们很常见的“是/否”以及"确认/取消"的操作就是很好的例子(想起 window.confirm 了吗)。

这时仅需要在 buttons 中加入第二个元素:

buttons:['取消','确定']

数组的顺序和按钮的顺序是一致的,一般习惯将“确定”放在"取消"的右边。


需要注意的是,当 buttons 数组的元素是一个字符串时,这个按钮被触发时的动作仅仅就是关闭这一个模态框,如果我们要为“确定”按钮加入更多的动作,我们需要把数组的第二个元素改成一个对象,这个对象有两个元素,一个是title,一个是handler,handler是一个函数,在按钮触发后被执行。

let alert = this.alertCtrl.create({
        title:'提示信息',
        subTitle:'你真的忍心把我从生命中抹去吗?',
        buttons:['取消',
          {
            text:'确定',
            handler:()=>{
              console.log('确定按钮被点击')
            }
          }]
      })
      alert.present();

加入buttons数组有三个、四个甚至更多的元素,你猜会发生什么?
它们会挤成一排最后谁也看不到谁?
No No No
设计师怎么会那么蠢,他们当然是把按钮竖着摆,不论是 iOS 还是 Android 都是这样。


带输入域的 Alerts 控件

Alerts 还可以用来做一件事:让用户输入必要的信息以后才能进行下一步操作。对于 iOS 用户最常见的就是安装app是需要输入icloud的密码(当然现在有了 Touch ID 和 Face ID ),对于有些操作,单独写一个页面让用户信息显得比较浪费,使用 Alerts 不妨是一个好方法 (想起没什么人用的 window.prompt 了吗?)

let alert = this.alertCtrl.create({
        title:'新建相册',
        subTitle:'请输入相册的名称',
        inputs:[
          {
            name:'albumName',
            placeholder:'相册名称'
          }
        ],
        buttons:['取消',
          {
            text:'确定',
            handler:data =>{
              console.log(data.albumName)
            }
          }]
      })
      alert.present();

向create函数提供一个 inputs 属性,它是一个对象数组,其中 name 和 placeholder 跟 input 标签中这两者的意涵是一样的。

输入在 input 当中的内容,会被包装成一个对象传给 handler 函数,在这个例子中,你可以通过 data.albumName 将它读取出来。

问:既然 inputs是数组,可不可以有多个文本域?答:可以,但是好像很少见。
此外,input 对象还支持 type 属性哦,这里的 type 可以是radio 和 checkbox ,至于怎么用,有兴趣的话自己去探究吧!

Toast 控件

Toast 也是一种模态框,也常以提示信息的作用出现,不过比起 Alerts,它就温婉许多了。它常以气泡的形式浮现在页面的下方,经过短暂的时间后自动消失,用户仅仅需要使用眼睛来接受信息,而不需要作出任何的反馈。

Toast 的使用

Toast 的使用跟 Alerts 基本类似,同样需要引入 ToastController 并注入到构造函数中,它的 create 函数参数也是一个对象,主要包括两个属性:

  1. message: 字符串,提示的内容
  2. duration: 数字,在页面上停留的时间,单位为毫秒
    创建完成后使用 present 函数来显示
let toast = this.toastCtrl.create({
       message: '密码错误,请重新输入',
       duration: 1500
    });
    toast.present();
动图:提示密码错误,1.5秒后自动消失

此外,position属性可以改变气泡出现的位置(bottom/middle/top)


你也可以去掉 duration 属性,让气泡一直显示在页面上,然后通过 dismiss 方法来关闭它。

let toast = this.toastCtrl.create({
      message: '我是一个大气泡',
    });
    toast.present();
    setTimeout(()=>{
      toast.dismiss();
    },1500)
//唉,其实跟 duration:1500 是一样的

如何选择 Alerts 和 Toast

Alerts 和Toast 都有提示的作用,如果是进行单纯的消息提示,该选择哪一种控件呢?
基于 Alerts 会中断用户操作这一特点,我们可以用它来提示严重的错误和故障,就比如当前网络已经断开,程序没有办法正常获取数据了,这时候 Alerts 一方面可以突出信息的重要性、另一方面也会阻止用户继续操作页面上的内容,并在用户点击确定后退出当前的页面。
而 Toast 仅仅是把当前的状态告知给用户,不会影响用户的操作,所以一般正面的信息,像登录成功、保存成功之类的提示就派 Toast 来完成,这样可以更好地界面交互的流畅。
当然像本文展示的密码错误这一个例子,用 Alerts 好还是用 Toast 好,其实并没有标准答案,就看你认为这一个错误在你这个程序中,造成的影响够不够值得弹一个大框框去提示了。

提供参考的文档

AlertController API文档
ToastController API文档

来扯点ionic
Web note ad 1