今天可不是講selector喔(笑)

Today Preview

Cupertino

Flutter提供了一系列iOS Style風格的元件
所有的UIControl都可以去這裡找到(幾乎啦～UIStepper就沒有XD)
像今天提到的DatePicker跟ActionSheet都有包括
只可惜是Flutter並不會根據不同平台自動轉換相應的元件外觀(RN應該就會？)
但是至少我們可以透過Theme.of(context).platform去判斷目前是哪個平台

1. CupertinoDatePicker

是Flutter幫我們包好的StatefulWidget
屬性幾乎都跟以前一樣, 就不贅述了
主要差異還是多了一個onDateTimeChanged的call back
另外在Flutter應該不能用textField彈出inputVeiw這招了
所以我是在按鈕按下去的時候去控制高度(透過setState)

2. CupertinoActionSheet

其實用法跟Lesson7提到的模式差不多

1. 使用showCupertinoModalPopup召喚
2. 每個按鈕裡面都要call Navigator.pop (很麻煩= =)
3. 有專屬的CupertinoActionSheetAction可以用

Material

Andorid這邊反而就沒有固定的Widget可以用了

1. showTimePicker

是一個會返回TimeOfDay的function(點背景關掉就會回null)
initialTime一定要給(怎麼不預設.now...)
跟CupertinoDatePicker不同
沒有提供onDateTimeChanged

2. showBottomSheet

這個彈性就更高了
可以使用showBottomSheet(ScaffoldState的方法, 滑動關閉)
也可以使用showModalBottomSheet(常見的Modal方法, 點背景關閉)

這兩個方法
名字長很像
但寫法又不太一樣
用的時候卡了一下(傻傻分不清楚)

//1. 先設一組key
final scaffoldKey = GlobalKey<ScaffoldState>();

//2. 在生Scaffold的時候綁定
return Scaffold(
    key: scaffoldKey,

//3. 使用時就可以透過key取得ScaffoldState
showMediaBottomSheet(context, scaffoldKey.currentState)

void showMediaBottomSheet(BuildContext context, ScaffoldState scaffoldState){
  scaffoldState.showBottomSheet((context) => mediaWrap);
}

//～～～～～～～～～～蕩氣回腸的分隔線～～～～～～～～～～

void showModalMediaBottomSheet(context){
  showModalBottomSheet(
      context: context,
      builder: (BuildContext bc) => mediaWrap
  );
}

而builder只要是Widget都收
這邊是以Wrap實作(因為Wrap有著緊縮包覆children的特性)
如果把Wrap改成Column的話
就會變成bottomSheet可允許的最大高度

Widget mediaWrap = Container(
  color: Colors.greenAccent,
  child: Wrap(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.music_note),
        title: Text('Music'),
        onTap: () => {
          setState(() {
            choosed = "音樂";
            Navigator.pop(context);
          })
        }
      ),
      ListTile(
        leading: Icon(Icons.videocam),
        title: Text('Video'),
        onTap: () => {
          setState(() {
            choosed = "影片";
            Navigator.pop(context);
          })
        },
      ),
    ],
  ),
);

3. 對照表

參考連結

• 老孟 - 日期选择组件
• Flutter bottomSheet的使用 (解釋Flutter裡的各種bottomSheet)

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

下集預告：列表