快捷導(dǎo)航

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

更新時(shí)間：2023年05月20日 11:17:17 作者：江山清風(fēng)山間明月

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

PopupMenuButton簡(jiǎn)介

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

PopupMenuButton常用屬性

PopupMenuButton的常用屬性包括：

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

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

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

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

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

PopupMenuItem

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

PopupMenuItem的常用屬性包括：

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

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

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

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

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

例子

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

效果如下圖：

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

您可能感興趣的文章: