前言

Flutter 自帶的 FloatingActionButton 為我們提供了一個懸浮在頂部的按鈕，這個按鈕始終在最頂層，因此可以做一些快捷的操作。比如，滾動列表時點擊該按鈕回到頂部。然而，如果我們有多個操作需要懸浮在頂部的時候，一個 FloatingActionButton 就不夠了。這個時候也不適合將多個按鈕同時懸浮在頁面頂部，那就需要點開一個 FloatingActionButton 再彈出更多操作來。這個實現(xiàn)還挺復(fù)雜的，不過已經(jīng)有人幫我們搞定了。這就是增強版的 FloatingActionButton —— SpeedDial 組件，組件地址：flutter_speed_dial。下面是SpeedDial組件的官方示例運行效果。

SpeedDial 使用

在使用 FloatignActionButton 的地方就可以直接使用 SpeedDial 替換。所不同的是，SpeedDial 有一個 children 屬性，可以添加多個SpeedDialChild組件作為點擊 SpeedDial 彈出的更多操作。同時，SpeedDial 還提供了很多個性化的參數(shù)。SpeedDial的參數(shù)很多，這里不一一列舉了，我們挑幾個重要的參數(shù)說明一下。其他參數(shù)大家可以看一下源碼， SpeedDial的源碼注釋得非常好。

• overlayColor：點擊后彈出的蒙層顏色。
• overlayOpacity：點擊后彈出的蒙層透明度。例如，如果要黑色半透明，那么需要將 overlayColor 設(shè)置為黑色，然后overlayOpacity設(shè)置為0.5。
• icon：按鈕的圖標，可以用 icon 來設(shè)置圖標按鈕。當然也可以使用child 參數(shù)設(shè)置自定義的樣式。
• activeIcon：展開后的圖標，用來區(qū)分當前按鈕活躍的狀態(tài)。
• buttonSize：按鈕的寬高尺寸；
• childrenButtonSize：展開按鈕的寬高尺寸；
• direction：展開按鈕的方向，可以從左側(cè)、右側(cè)、上側(cè)或下側(cè)展開操作按鈕；
• spaceBetweenChildren：展開按鈕之間的間距（默認間距外可以額外增加的間距）；
• visible：是否可見，如果滾動時要隱藏 SpeedDial，那么可以在滾動過程中設(shè)置 visible 為 false；
• children：SpeedDialChild數(shù)組，用于包裹展開后的按鈕。

SpeedDialChild 使用比較簡單，通常是用圖標作為其子組件，也支持添加文字標簽說明按鈕的功能，這里不再贅述。

我們來看 SpeedDial 的一個實際例子，在 Scaffold 的 floatingActionButton 使用 SpeedDial 替換 FloatingActionButton，然后就是配置 SpeedDial 的參數(shù)和響應(yīng)方法了，SpeedDial 部分源碼如下，其中_speedDialDirection用于控制展開按鈕出現(xiàn)的方向，

floatingActionButton: SpeedDial(
  overlayColor: Colors.black,
  overlayOpacity: 0.5,
  icon: Icons.rocket,
  elevation: 4.0,
  buttonSize: const Size(44, 44),
  childrenButtonSize: Size(_childButtonSize, _childButtonSize),
  animationAngle: -pi / 4, // 圖標的旋轉(zhuǎn)角度，和圖標本身的朝向沒關(guān)系
  activeIcon: Icons.rocket_launch,
  direction: _speedDialDirection,
  spaceBetweenChildren: 4.0,
  spacing: 4.0,
  children: [
    SpeedDialChild(
      child: const Icon(Icons.add),
      backgroundColor: Colors.green,
      foregroundColor: Colors.white,
      onTap: () {},
    ),
    SpeedDialChild(
      child: const Icon(Icons.settings),
      backgroundColor: Colors.orange[300],
      foregroundColor: Colors.white,
      onTap: () {},
    ),
    SpeedDialChild(
      child: const Icon(Icons.person),
      backgroundColor: Colors.purple[300],
      foregroundColor: Colors.white,
      onTap: () {},
    ),
  ],
),

運行效果如下。

總結(jié)

可以看到，SpeedDial 的使用是非常簡單的，而且提供了非常豐富的個性化配置參數(shù)。對于需要點擊懸浮按鈕展開更多操作的場景來說，是一個可以直接拿來就用的組件。平時，大家也可以多淘淘這樣的組件，到了用得上的時候就可以省時省力了。

到此這篇關(guān)于Flutter實現(xiàn)增強版的頁面懸浮按鈕的示例代碼的文章就介紹到這了,更多相關(guān)Flutter頁面懸浮按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！