快捷導(dǎo)航

Flutter實現(xiàn)增強(qiáng)版的頁面懸浮按鈕的示例代碼

更新時間：2023年01月31日 08:25:13 作者：島上碼農(nóng)

Flutter?自帶的?FloatingActionButton?為我們提供了一個懸浮在頂部的按鈕，這個按鈕始終在最頂層，因此可以做一些快捷的操作。本文就來和大家詳細(xì)聊聊

前言

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

SpeedDial 使用

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

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

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

我們來看 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, // 圖標(biāo)的旋轉(zhuǎn)角度，和圖標(biāo)本身的朝向沒關(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: () {},
    ),
  ],
),

運(yùn)行效果如下。