小菜需要處理標(biāo)題欄彈出對話框 PopupMenu 樣式，Flutter 當(dāng)然提供了一些處理方式，類似 PopupMenuEntry 等，小菜僅就最基礎(chǔ)的使用方式進(jìn)行初步的學(xué)習(xí)和整理。
PopupMenuItem 基本樣式
PopupMenuItem 為單個(gè) item 的彈出樣式，默認(rèn)為 48px 高，可根據(jù)需求自行定義。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: 若需要處理帶圖標(biāo)的樣式時(shí)，官網(wǎng)提供的 Demo 是借助的 ListTile 來處理的，但是小菜測試發(fā)現(xiàn)圖標(biāo)與文字距離偏大，原因在于 ListTile 默認(rèn)左側(cè)圖標(biāo) leading 距離不可直接調(diào)整，建議用 Row 或其他方式調(diào)整。
// 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 是一個(gè)帶有復(fù)選標(biāo)記的彈出菜單項(xiàng)。默認(rèn)高度同樣是 48px，水平布局使用 ListTile 復(fù)選標(biāo)記是 Icons.done 圖標(biāo)，顯示在 leading 位置；同時(shí)只有在狀態(tài)為選中時(shí)才會顯示圖標(biāo)。
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 是一條水平分割線，注意數(shù)組要使用父類 PopupMenuEntry，配合其他 item 樣式共同使用。PopupMenuDivider 可以調(diào)整高度，但無法調(diào)整顏色，有需要的話可以進(jìn)行自定義。
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 默認(rèn)的彈框位置都是在右上角，且會擋住標(biāo)題欄，如果有需要在其他位置彈框就需要借助 showMenu，主要通過 position 屬性定位彈框位置。
menu 的寬高與內(nèi)容相關(guān)，小菜的理解是在水平和豎直方向上會將設(shè)置的 position 位置加上 menu 寬高，再與屏幕匹配，超過屏幕寬高，根據(jù) 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 個(gè)數(shù)過多也無需擔(dān)心，F(xiàn)lutter 支持默認(rèn)超過屏幕滑動效果。
小菜目前的學(xué)習(xí)還僅限于基本的使用，稍高級的自定義涉及較少，如果又不對的地方還希望多多指出。
來源：阿策小和尚
