Flutter 23: 圖解 PopupMenu 那些事兒

Flutter 安卓開發 · 發表 2018-11-22 22:17:35

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

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

PopupMenuItem 基本樣式

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

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('PopMenuDemo'),
actions: <Widget>[_NomalPopMenu()],
),
body: Center(child: new Text(_bodyStr)));
}

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

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

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

// 普通自定義樣式
new PopupMenuItem<String>(
value: 'value01',
child: Row(children: <Widget>[
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<String>(
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
new CheckedPopupMenuItem<String>(
checked: false, value: 'value01', child: new Text('Item One')),
new CheckedPopupMenuItem<String>(
checked: true, value: 'value02', child: new Text('Item Two')),
new CheckedPopupMenuItem<String>(
checked: false, value: 'value03', child: new Text('Item Three')),
new CheckedPopupMenuItem<String>(
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<String>(
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
new PopupMenuItem<String>( value: 'value01', child: new Text('Item One')),
new PopupMenuDivider(height: 1.0),
new PopupMenuItem<String>( value: 'value02', child: new Text('Item Two')),
new PopupMenuDivider(height: 1.0),
new PopupMenuItem<String>( value: 'value03', child: new Text('Item Three')),
new PopupMenuDivider(height: 1.0),
new PopupMenuItem<String>( 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: <PopupMenuItem<String>>[
new PopupMenuItem<String>( value: 'value01', child: new Text('Item One')),
new PopupMenuItem<String>( value: 'value02', child: new Text('Item Two')),
new PopupMenuItem<String>( value: 'value03', child: new Text('Item Three')),
new PopupMenuItem<String>( value: 'value04', child: new Text('I am Item Four'))
] );
},