Flutter 增強版的頁面懸浮按鈕（FloatingActionButton）

語言: CN / TW / HK
時間 2023-01-31 09:15:14

theme: v-green highlight:

前言

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

SpeedDial 使用

在使用 FloatignActionButton 的地方就可以直接使用 SpeedDial 替換。所不同的是，SpeedDial 有一個 children 屬性，可以新增多個SpeedDialChild元件作為點選 SpeedDial 彈出的更多操作。同時，SpeedDial 還提供了很多個性化的引數。SpeedDial的引數很多，這裡不一一列舉了，我們挑幾個重要的引數說明一下。其他引數大家可以看一下原始碼， SpeedDial的原始碼註釋得非常好。

  • overlayColor：點選後彈出的蒙層顏色。
  • overlayOpacity：點選後彈出的蒙層透明度。例如，如果要黑色半透明，那麼需要將 overlayColor 設定為黑色，然後overlayOpacity設定為0.5。
  • icon：按鈕的圖示，可以用 icon 來設定圖示按鈕。當然也可以使用child 引數設定自定義的樣式。
  • activeIcon：展開後的圖示，用來區分當前按鈕活躍的狀態。
  • buttonSize：按鈕的寬高尺寸；
  • childrenButtonSize：展開按鈕的寬高尺寸；
  • direction：展開按鈕的方向，可以從左側、右側、上側或下側展開操作按鈕；
  • spaceBetweenChildren：展開按鈕之間的間距（預設間距外可以額外增加的間距）；
  • visible：是否可見，如果滾動時要隱藏 SpeedDial，那麼可以在滾動過程中設定 visible 為 false；
  • children：SpeedDialChild陣列，用於包裹展開後的按鈕。

SpeedDialChild 使用比較簡單，通常是用圖示作為其子元件，也支援新增文字標籤說明按鈕的功能，這裡不再贅述。

我們來看 SpeedDial 的一個實際例子，在 Scaffold 的 floatingActionButton 使用 SpeedDial 替換 FloatingActionButton，然後就是配置 SpeedDial 的引數和響應方法了，SpeedDial 部分原始碼如下，其中_speedDialDirection用於控制展開按鈕出現的方向，

dart 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, // 圖示的旋轉角度，和圖示本身的朝向沒關係 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: () {}, ), ], ), 執行效果如下。

speeddial.gif

總結

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

我是島上碼農，微信公眾號同名。如有問題可以加本人微信交流，微訊號：island-coder。

👍🏻：覺得有收穫請點個贊鼓勵一下！

🌟：收藏文章，方便回看哦！

💬：評論交流，互相進步！

「」
「」