Flutter UI - 彈窗系 Widget

Flutter 裏面的譚莊無論是重量級的仍是輕量級的都在這裏了：

• DropdownButton - 下拉菜單按鈕
• PopupMenuButton - 彈出菜單按鈕
• ``
• ``
• ``

---

DropdownButton

DropdownButton 是一個簡單的下拉選擇框，構建特色：

• 無論是 hint 的樣式仍是 可選擇 的樣式都是 widget
• 每一項都是特定的 widget 類型：DropdownMenuItem，你們在其內部再寫具體的 widget 樣式，不過樣式是本身寫，可是 DropdownMenuItem 內部有個 value 對應該選項的值，這個必需要寫的
• 當前選項的變化須要咱們本身維護，DropdownButton 是不會幫咱們作的

圖是隨便找的：

主要屬性以下：

• hint - 默認樣式
• items - 選項樣式，注意是值是列表類型
• value - 當前選中的那項
• onChanged - 選中事件

class TestWidgetState extends State<TestWidget> {
  String selectValue;

  @override
  Widget build(BuildContext context) {
    return DropdownButton(
      hint: Text("請選擇您要的號碼:"),
      items: getItems(),
      value: selectValue,
      onChanged: (value) {
        print(value);
        setState(() {
          selectValue = value;
        });
      },
    );
  }

  getItems() {
    var items = List<DropdownMenuItem<String>>();
    items.add(DropdownMenuItem(child: Text("AA"), value: "11"));
    items.add(DropdownMenuItem(child: Text("BB"), value: "22",));
    items.add(DropdownMenuItem(child: Text("CC"), value: "33",));
    items.add(DropdownMenuItem(child: Text("DD"), value: "44",));
    items.add(DropdownMenuItem(child: Text("EE"), value: "55",));
    return items;
  }
}
複製代碼

這裏有個泛型的點要注意，咱們聲明 DropdownMenuItem 選項列表時要指定數值類型 List<DropdownMenuItem<String>>()，要不 selectValue 那裏就不能寫具體的數值類型，只能寫 var 了

---

PopupMenuButton

PopupMenuButton android 裏的 PopupWindow 你們很熟悉吧，這個就是 Flutter 版的

樣式圖：

主要參數：

• itemBuilder 構建彈出菜單樣式，是 list 結構的數據，使用 PopupMenuItem 承載每一個 item ，可是 list 外層的泛型要用 List<PopupMenuEntry<String>>，很是蛋疼，說實話 itemBuilder這裏的 API 我是真不喜歡，太難用了，和DropdownButton的設計都不統一，對於itemBuilder內部的實現類誰關心呢，根本就不該該把PopupMenuEntry` 暴露出來。寫法固定的，你們記住吧

• elevation 陰影高度

• padding 邊距

• child 按鈕樣式和 icon 互斥，只能用一個

• icon 按鈕樣式和 child 互斥，只能用一個

• offset 偏移量，offset 的值>100 好比：offset(100,100) 就是在 actionBar 的正下面

• onSelected 用戶選中的回調

• onCanceled 用戶取消的回調

• 配合 actionBar 的寫法：

class _MyHomePageState extends State<MyHomePage> {
  var items = <String>["AA", "BB", "CC", "DD", "FF"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          PopupMenuButton<String>(
            itemBuilder: (BuildContext context) {
              return _getItemBuilder2();
            },
            icon: Icon(Icons.access_alarm),
            onSelected: (value) {
              print(value);
            },
            onCanceled: () {},
            offset: Offset(200, 100),
          )
        ],
      ),
      body: Center(
        child: TestWidget(),
      ),
    );
  }
}
複製代碼

• 常規生成 item 的寫法：

List<PopupMenuEntry<String>> _getItemBuilder() {
    return items
        .map((item) => PopupMenuItem<String>(
              child: Text(item),
              value: item,
            ))
        .toList();
  }
複製代碼

• 加上分割線，帶 icon 的 item

List<PopupMenuEntry<String>> _getItemBuilder2() {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: "1",
        child: ListTile(
          leading: Icon(Icons.share),
          title: Text('分享'),
        ),
      ),
      PopupMenuDivider(), //分割線
      PopupMenuItem<String>(
        value: "2",
        child: ListTile(
          leading: Icon(Icons.settings),
          title: Text('設置'),
        ),
      ),
    ];
  }
複製代碼

除了 actionBar 以外，其餘地方也能夠用啊， 置於顯示位置，你要知道 item 的寬度，+- 表明左右方向，在下方按鈕顯示，Y 座標寫 100 就行