Today Preview

1. 按鈕

以前的按鈕iOS跟Android都只有一種
但Flutter光常用的就有3+1+1種
據說總共有10種以上
所有按鈕都是透過onPressed來處理點擊事件
如果onPressed為null
按鈕就會強制變成disable
所以至少要給個空function

另外如果要做圓角按鈕
可以透過shape屬性處理

shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0))

1.1 RawMaterialButton

1.RaisedButton有陰影會有抬起的效果
2.FlatButton扁平樣式感覺最簡潔的
3.OutlineButton有框線的
以上三個按鈕都是Material風格的按鈕
所以基本上除了外觀不同以外
有以下相同的特性

1. 點擊會有水波效果
2. 上面的文字是透過child屬性給予(屬性不是title XD)

RaisedButton(child: Text("RaisedButton"))

3. 有.icon的初始化方法, 可以做出帶同時有icon跟文字的按鈕(工廠模式)

RaisedButton.icon(icon: Icon(Icons.link), label: Text("link"), onPressed: () {});

1.2 IconButton

是個沒有文字的圓形按鈕
雖然IconButton不是Material風格
但也是會有水波效果

1.3 CupertinoButton

就是UIButton啦～

1.4 其他按鈕

還有一些BackButton啦、CloseButton啦
都會自帶Navigator.maybePop作用
BackButton還會根據不同平台顯示不同圖案
(話說iOS13也新增了一個close的buttonType)

2. 對話方塊

一樣有分AlertDialog 跟 CupertinoAlertDialog 兩種外觀
跟以前AlertController差不多
有title, content, actions
也是用跟present類似的方法：showDialog 跟 showCupertinoDialog去把dialog叫出來
(showDialog可以透過barrierDismissible決定可否點背景關閉)
但是有一點不太一樣⚠️⚠️⚠️
必須在action裡自己呼叫Navigator.pop把dialog給dismiss掉
如果要取得dialog的值也是透過pop回傳, 如下

//1. 在AlertDialog的按鈕裡透過pop把布林值傳出來
class CupertinoButtonAlertDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoAlertDialog(
      title: Text("你按的是"),
      content: Text("iOS"),
      actions: <Widget>[
        CupertinoButton( //裝IconButton會壞掉XD
            child: Text("No~"),
            onPressed: () {
              Navigator.pop(context, false);
            }),
        CupertinoButton(
            child: Text("Yes!"),
            onPressed: () {
              Navigator.pop(context, true);
            }),
      ]
    );
  }
}

//2. 設定按下按鈕執行showCupertinoDialog
//因為showCupertinoDialog會回傳一個Future
//所以必須指定call back為async
//並用await把值接住
final cupertinoButton = CupertinoButton(child: Text("CupertinoButton"), onPressed: () async {
  bool ans = await showCupertinoDialog(
    context: context,
    builder: (BuildContext content) {
        return CupertinoButtonAlertDialog();
      }
  );
  print("答案是 $ans");
});

3. 對照表

本集內容Android版請見：iOS Developer Learning Android. Lesson 11

下集預告：圖片