PopupMenuButton簡介

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

PopupMenuButton常用屬性

PopupMenuButton的常用屬性包括：

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

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

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

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

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

PopupMenuItem

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

PopupMenuItem的常用屬性包括：

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

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

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) {
              // 處理操作菜單選項的回調
              // TODO: 根據選中的操作執(zhí)行相應的邏輯
              print('選中的選項: $value');
            },
            icon: Icon(Icons.add_circle),
          ),
        ],
      ),

效果如下圖：

到此這篇關于Flutter實現PopupMenu彈出式菜單按鈕詳解的文章就介紹到這了,更多相關Flutter PopupMenu彈出菜單內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論