Flutter 學習 - Widget 之 菜單按鈕

前言

鐺 ，鐺 ，鐺，終於又要更新了，最近工作事情比較多，很久沒有進行Flutter章節的進度更新，今天我們來看下Flutter中菜單按鈕的使用方法，這個按鈕的名字叫做PopupMenuButton,老規矩，先看下效果

正文

PopupMenuButton其實就是一個按鈕，在點擊按鈕的時候可以彈出類似於Android的選項菜單的框

• 使用方式

PopupMenuButton<String>(
            initialValue: "",
            child: Text(
                "點擊這裏展示menu",
                textAlign: TextAlign.center,
                style: TextStyle(
                    backgroundColor: Colors.blue,
                    fontSize: 36,
                    fontStyle: FontStyle.italic
                ),
            ),
            onSelected: (String string){
                print(string.toString());
            },
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                 PopupMenuItem(
                     child: Text("全部"),
                     value: "全部",
                 ),PopupMenuItem(
                     child: Text("戀愛"),
                     value: "戀愛",
                 ),PopupMenuItem(
                     child: Text("修真"),
                     value: "修真",
                 ),PopupMenuItem(
                     child: Text("免費"),
                     value: "免費",
                 )
            ]
      )

這裏使用其實很簡單，其中child參數是用來顯示按鈕的內容，itemBuilder參數是用來顯示彈出的菜單，onSelected參數用來處理點擊之後的點擊事件，會返回我們選中的選項，initialValue參數用來初始化我們的選項，當設置的時候會突出顯示，下面來看下我們給initialValue設置值

我們設置的初始值爲“戀愛”，效果爲

我們可以看到這時候戀愛就顯示爲被選中狀態，並且處於與我們的文字按鈕對齊狀態
###源碼分析
注：參數除了itemBuilder爲必傳參數，其他都是可選狀態

const PopupMenuButton({
    Key key,
    @required this.itemBuilder,//必選，要顯示的菜單 ，類型是PopupMenuItemBuilder	
    this.initialValue,//初始化的菜單項，如果有，在菜單打開時會突出顯示。類型爲T，看你的菜單定義的是什麼類型
    this.onSelected,//當用戶從此按鈕創建的彈出菜單中選擇一個值時調用，類型 PopupMenuItemSelected
    this.onCanceled,//當用戶在不選擇項目的情況下關閉彈出菜單時調用。類型 PopupMenuItemSelected
    this.tooltip,//類型是String ，當長按時顯示的文本，用於盲人輔助模式下
    this.elevation = 8.0,//類型是double，Button 相對於其父級放置的z座標，這可以控制 menu 下的陰影大小,默認值爲8.0，該值必須>=0
    this.padding = const EdgeInsets.all(8.0),//menu 的內邊距	類型是EdgeInsetsGeometry
    this.child,//這個按鈕裏顯示的內容，類型是Widget
    this.icon,//這個按鈕裏顯示的 Icon Widget，前面在 圖片框和Icon 一節講過如何使用 Icon Widget ，類型是Icon
    this.offset = Offset.zero,//menu 相對按鈕的偏移量，類型是Offset
    this.enabled = true,//按鈕是否可用，false的話 按鈕點擊沒效果
  }) : assert(itemBuilder != null),
       assert(offset != null),
       assert(enabled != null),
       assert(!(child != null && icon != null)), // fails if passed both parameters
       super(key: key);

以下是我的Flutter系列的鏈接，後續會持續更新，歡迎大家指正。

Flutter 系列文章

• Flutter 學習 - 開篇
• Flutter 學習 - 基礎框架
• Flutter 學習 - 網絡請求和數據解析
• Flutter 學習 - Widget 之 Text
• Flutter 學習 - Widget 之 RichText
• Flutter 學習 - Widget 之 Image和Icon
• Flutter 學習 - Widget 之 TextField
  
• Flutter 學習 - Widget 之 對話框
• Flutter 學習 - Widget 之 菜單按鈕
• Flutter 學習 - Widget 之 佈局 Widget
• Flutter 學習 - 容器類Widget
• Flutter 學習 - 可滾動的 Widget
• Flutter 學習 - 功能類Widget

更多關於技術相關的內容請關注博主公衆號–迷途程序猿