快捷導(dǎo)航

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

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

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

前言

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

SpeedDial 使用

在使用 FloatignActionButton 的地方就可以直接使用 SpeedDial 替換。所不同的是，SpeedDial 有一個(gè) children 屬性，可以添加多個(gè)SpeedDialChild組件作為點(diǎn)擊 SpeedDial 彈出的更多操作。同時(shí)，SpeedDial 還提供了很多個(gè)性化的參數(shù)。SpeedDial的參數(shù)很多，這里不一一列舉了，我們挑幾個(gè)重要的參數(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：是否可見，如果滾動(dòng)時(shí)要隱藏 SpeedDial，那么可以在滾動(dòng)過程中設(shè)置 visible 為 false；
children：SpeedDialChild數(shù)組，用于包裹展開后的按鈕。

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

我們來看 SpeedDial 的一個(gè)實(shí)際例子，在 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)行效果如下。

總結(jié)

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

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

您可能感興趣的文章: