Flutter實現(xiàn)PopupMenu彈出式菜單按鈕詳解

更新時間：2023年05月20日 11:17:17 作者：江山清風山間明月

這篇文章主要介紹了Flutter實現(xiàn)PopupMenu彈出式菜單按鈕，PopupMenuButton是一個用于創(chuàng)建彈出菜單的小部件，當用戶點擊觸發(fā)按鈕時，PopupMenuButton會在屏幕上方或下方彈出一個菜單，感興趣想要詳細了解可以參考下文

PopupMenuButton簡介

PopupMenuButton是一個用于創(chuàng)建彈出菜單的小部件。它通常與IconButton或其他觸發(fā)菜單顯示的小部件一起使用。當用戶點擊觸發(fā)按鈕時，PopupMenuButton會在屏幕上方或下方彈出一個菜單，顯示一組選項供用戶選擇。

PopupMenuButton常用屬性

PopupMenuButton的常用屬性包括：

itemBuilder：菜單項構建器，用于定義菜單中的選項。它接受一個回調(diào)函數(shù)，該函數(shù)返回一個包含菜單項的List<PopupMenuEntry>，其中T是選項的類型。

onSelected：選項被選擇時的回調(diào)函數(shù)。當用戶選擇菜單中的選項時，該回調(diào)函數(shù)會被觸發(fā)，參數(shù)為選中的選項值。

icon：觸發(fā)菜單顯示的圖標，通常使用IconButton來顯示。

下面是一個示例代碼，演示如何使用PopupMenuButton創(chuàng)建一個操作菜單：

在上面的示例中，itemBuilder回調(diào)函數(shù)返回了一個包含三個菜單項的List<PopupMenuEntry>，每個菜單項都使用PopupMenuItem構建。onSelected回調(diào)函數(shù)會在用戶選擇菜單項時被觸發(fā)，它會打印選中的選項值。icon屬性用于顯示觸發(fā)菜單顯示的圖標，這里使用了一個垂直更多選項的圖標。

PopupMenuItem

PopupMenuItem是PopupMenuButton中的一個小部件，用于創(chuàng)建彈出菜單中的一個選項。它通常作為itemBuilder回調(diào)函數(shù)中返回的List中的一項。

PopupMenuItem的常用屬性包括：

value：選項的值。當用戶選擇該選項時，onSelected回調(diào)函數(shù)會被觸發(fā)，并且該值將作為參數(shù)傳遞給回調(diào)函數(shù)。

child：選項的內(nèi)容，通常為Text小部件，用于顯示選項的文本或其他內(nèi)容。

enabled：選項是否可用。如果設置為false，則選項將顯示為禁用狀態(tài)，用戶無法選擇。

height：選項的高度?？梢允褂迷搶傩宰远x選項的高度。

textStyle：選項文本的樣式?？梢允褂迷搶傩宰远x選項文本的樣式，如字體、顏色等。

例子

 appBar: AppBar(
        title: _buildAppBarTitle(),
        centerTitle: true,
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: _showSearchPage,
          ),
          PopupMenuButton<String>(
            itemBuilder: (context) => [
              PopupMenuItem(
                child: Text('發(fā)起群聊'),
                value: '發(fā)起群聊',
              ),
              PopupMenuItem(
                child: Text('添加朋友'),
                value: '添加朋友',
              ),
              PopupMenuItem(
                child: Text('掃一掃'),
                value: '掃一掃',
              ),
              PopupMenuItem(
                child: Text('收付款'),
                value: '收付款',
              ),
            ],
            onSelected: (value) {
              // 處理操作菜單選項的回調(diào)
              // TODO: 根據(jù)選中的操作執(zhí)行相應的邏輯
              print('選中的選項: $value');
            },
            icon: Icon(Icons.add_circle),
          ),
        ],
      ),

效果如下圖：