來扯點ionic3[8] 模態框 Alerts 和 Toast

咱們在實現交互設計時，常須要就應用的狀態、特定的操做進行必要的提示和反饋，包括提醒用戶網絡出現故障、某一項輸入不合法、某個操做已經生效等等。面對這樣的狀況，使用模態框是一種經常使用和便捷的方法。

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();

此外，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文檔