小菜需要處理標題欄彈出對話框 PopupMenu 樣式，Flutter 當然提供了一些處理方式，類似 PopupMenuEntry 等，小菜僅就最基礎的使用方式進行初步的學習和整理。

PopupMenuItem 基本樣式

      PopupMenuItem 為單個 item 的彈出樣式，默認為 48px 高，可根據需求自行定義。item 中可以自定義需要的樣式，包括文字圖片等一系列樣式。

@overrideWidget build(BuildContext context) {  return new Scaffold(      appBar: AppBar(        title: Text(PopMenuDemo),        actions: [_NomalPopMenu()],      ),      body: Center(child: new Text(_bodyStr)));}Widget _NomalPopMenu() {  return new PopupMenuButton(      itemBuilder: (BuildContext context) => >[            new PopupMenuItem(                value: value01, child: new Text(Item One)),            new PopupMenuItem(                value: value02, child: new Text(Item Two)),            new PopupMenuItem(                value: value03, child: new Text(Item Three)),            new PopupMenuItem(                value: value04, child: new Text(I am Item Four))          ],      onSelected: (String value) {        setState(() { _bodyStr = value; });      });}

      Tips: 若需要處理帶圖標的樣式時，官網提供的 Demo 是借助的 ListTile 來處理的，但是小菜測試發現圖標與文字距離偏大，原因在于 ListTile 默認左側圖標 leading 距離不可直接調整，建議用 Row 或其他方式調整。

// ListTile 樣式new PopupMenuItem(    value: value01,    child: ListTile( leading: Icon(Icons.looks_one), title: Text(Item One))),

// 普通自定義樣式new PopupMenuItem(    value: value01,    child: Row(children: [      Padding( padding: EdgeInsets.fromLTRB(0.0, 0.0, 8.0, 0.0),          child: Icon(Icons.looks_one)),      Text(Item One)    ])),

CheckedPopupMenuItem 選中樣式

      CheckedPopupMenuItem 是一個帶有復選標記的彈出菜單項。默認高度同樣是 48px，水平布局使用 ListTile 復選標記是 Icons.done 圖標，顯示在 leading 位置；同時只有在狀態為選中時才會顯示圖標。

Widget _CheckPopMenu() {  return new PopupMenuButton(      itemBuilder: (BuildContext context) => >[            new CheckedPopupMenuItem(                checked: false, value: value01, child: new Text(Item One)),            new CheckedPopupMenuItem(                checked: true, value: value02, child: new Text(Item Two)),            new CheckedPopupMenuItem(                checked: false, value: value03, child: new Text(Item Three)),            new CheckedPopupMenuItem(                checked: false, value: value04, child: new Text(I am Item Four))          ],      onSelected: (String value) {        setState(() { _bodyStr = value; });      });}

PopupMenuDivider 分割線

      PopupMenuDivider 是一條水平分割線，注意數組要使用父類 PopupMenuEntry，配合其他 item 樣式共同使用。PopupMenuDivider 可以調整高度，但無法調整顏色，有需要的話可以進行自定義。

Widget _DividerPopMenu() {  return new PopupMenuButton(      itemBuilder: (BuildContext context) => >[            new PopupMenuItem( value: value01, child: new Text(Item One)),            new PopupMenuDivider(height: 1.0),            new PopupMenuItem( value: value02, child: new Text(Item Two)),            new PopupMenuDivider(height: 1.0),            new PopupMenuItem( value: value03, child: new Text(Item Three)),            new PopupMenuDivider(height: 1.0),            new PopupMenuItem( value: value04, child: new Text(I am Item Four))          ],      onSelected: (String value) {        setState(() { _bodyStr = value; });      });}

showMenu 指定位置

      PopupMenu 默認的彈框位置都是在右上角，且會擋住標題欄，如果有需要在其他位置彈框就需要借助 showMenu，主要通過 position 屬性定位彈框位置。

      menu 的寬高與內容相關，小菜的理解是在水平和豎直方向上會將設置的 position 位置加上 menu 寬高，再與屏幕匹配，超過屏幕寬高，根據 position 按照 LTRB 順序貼近屏幕邊框展示。

onTap: () async {  final result = await showMenu(    context: context,    position: RelativeRect.fromLTRB(100.0, 200.0, 100.0, 100.0),//    position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 10.0),    items: >[      new PopupMenuItem( value: value01, child: new Text(Item One)),      new PopupMenuItem( value: value02, child: new Text(Item Two)),      new PopupMenuItem( value: value03, child: new Text(Item Three)),      new PopupMenuItem( value: value04, child: new Text(I am Item Four))    ] );},

      Tips: 如果 item 個數過多也無需擔心，Flutter 支持默認超過屏幕滑動效果。

      小菜目前的學習還僅限于基本的使用，稍高級的自定義涉及較少，如果又不對的地方還希望多多指出。

來源：阿策小和尚