1. 基本介绍

FloatingActionButton 是一个悬浮在屏幕上方的按钮，常用于 Scaffold.floatingActionButton。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

FloatingActionButton属性	介绍
child	子控件，通常为 Icon
tooltip	长按时显示的提示语
foregroundColor	Icon 与 Text 颜色
backgroundColor	背景色
focusColor	聚焦色
hoverColor	悬浮色
splashColor	点击时的颜色
heroTag	标记
elevation	阴影高度
focusElevation	聚焦时阴影高度
hoverElevation	悬浮时阴影高度
highlightElevation	高亮时阴影高度
disabledElevation	不可用时阴影高度
onPressed	点击事件
mouseCursor	鼠标悬停，Web可以了解
mini	默认 false，默认按钮为 56 * 56，当mini 为 true 时，默认大小为 40 * 40，边框padding 各为 4，所以布局大小为 48 * 48
shape	自定义形状
clipBehavior	边缘裁剪方式，默认为 Clip.none
focusNode	焦点节点，例如监听 focusNode 可以实现输入框的开始、结束输入
autofocus	自动聚焦，默认为 false
materialTapTargetSize	点击区域大小，MaterialTapTargetSize.padded时最小点击区域为48*48，MaterialTapTargetSize.shrinkWrap 时为子组件的实际大小。
isExtended	默认为 false，当使用 extended 方法时为 true
extended.icon	设置 Icon（该属性为扩展属性）
extended.label	设置 label（@requirded，该属性为扩展属性）

4. FloatingActionButton 组件

4.1 容器创建

优雅的编程，首先创建一个 floatingActionButton.dart 文件。我们创建一个底部带 BottomAppBar 的页面。

import 'package:flutter/material.dart';

class FMFloatingActionButtonVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButton"),
      ),
      floatingActionButton: _floatingActionButton(),
      // floatingActionButton: _customFloatingActionButton(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      bottomNavigationBar: _bottomAppBar(),
    );
  }

  FloatingActionButton _floatingActionButton(){
    return FloatingActionButton(
      child: Icon(Icons.ac_unit),
    );
  }

  FloatingActionButton _customFloatingActionButton(){
    return FloatingActionButton.extended(
        onPressed: null, 
        icon: Icon(Icons.ac_unit),
        label: Text("悬浮按钮"),
    );
  }
  
  BottomAppBar _bottomAppBar(){
    return BottomAppBar(
      child: Container(
        height: 50,
        child: Row(
          children: [
            Expanded(
                child: Container(
                  child: Text("底"),
                  alignment: Alignment.center,
                ),
            ),
            Expanded(
              child: Container(
                child: Text("部"),
                alignment: Alignment.center,
              ),
            ),
            Expanded(
              child: Container(
                child: Text("按"),
                alignment: Alignment.center,
              ),
            ),
            Expanded(
              child: Container(
                child: Text("钮"),
                alignment: Alignment.center,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

FAB normal.png

4.2 FloatingActionButton 样式

FloatingActionButton 有两种样式，圆形与自适应。

4.2.1 圆形样式

最简单常用的样式，child 可以给任意 widget，但是不会改变大小与形状。当 child 尺寸超出时会抛出异常。

  FloatingActionButton _floatingActionButton(){
    return FloatingActionButton(
      child: Icon(Icons.ac_unit),
    );
  }

FAB circle.png

4.2.2 自适应样式

基于 Text 的自适应按钮。

  FloatingActionButton _customFloatingActionButton(){
    return FloatingActionButton.extended(
        onPressed: null, 
        icon: Icon(Icons.ac_unit),
        label: Text("悬浮按钮"),
    );
  }

FAB custom normal.png

FAB custom text.png

FAB custom too long.png

4.2.3 样式差异

我们来看一下 FloatingActionButton 与 FloatingActionButton.extended 源码。

FloatingActionButton 源码。

  const FloatingActionButton({
    Key key,
    this.child,
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
    this.focusColor,
    this.hoverColor,
    this.splashColor,
    this.heroTag = const _DefaultHeroTag(),
    this.elevation,
    this.focusElevation,
    this.hoverElevation,
    this.highlightElevation,
    this.disabledElevation,
    @required this.onPressed,
    this.mouseCursor,
    this.mini = false,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.materialTapTargetSize,
    this.isExtended = false,
  })

FloatingActionButton.extended 源码。

  FloatingActionButton.extended({
    Key key,
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
    this.focusColor,
    this.hoverColor,
    this.heroTag = const _DefaultHeroTag(),
    this.elevation,
    this.focusElevation,
    this.hoverElevation,
    this.splashColor,
    this.highlightElevation,
    this.disabledElevation,
    @required this.onPressed,
    this.mouseCursor = SystemMouseCursors.click,
    this.shape,
    this.isExtended = true,
    this.materialTapTargetSize,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    Widget icon,
    @required Widget label,
  })

不难看出，extended 方法增加 icon 与 label 两个属性，注意 label 使用 @required 修饰的，也就是使用 extended 方法时，必须传入 label 入参。

4.3 自适应按钮边框的不规则 BottomAppBar。

作为题外话插一下，不规则 bottomAppBar 的使用，根据 FloatingActionButton 外围，来挤开 bottomAppBar，完成按钮悬浮，且挤开 BottomAppBar 的效果。

  BottomAppBar _bottomAppBar(){
    return BottomAppBar(
      shape: CircularNotchedRectangle(),
      elevation: 20,
      notchMargin: 12,
      child: Container(
        height: 50,
        child: Row(
          children: [
            Expanded(
                child: Container(
                  child: Text("底"),
                  alignment: Alignment.center,
                ),
            ),
            Expanded(
              child: Container(
                child: Text("部"),
                alignment: Alignment.center,
              ),
            ),
            Expanded(
              child: Container(
                child: Text("按"),
                alignment: Alignment.center,
              ),
            ),
            Expanded(
              child: Container(
                child: Text("钮"),
                alignment: Alignment.center,
              ),
            ),
          ],
        ),
      ),
    );
  }

简单介绍一下相关属性

BottomAppBar属性	介绍
shape	NotchedShape 类型，可以用来做不接触的效果
elevation	BottomAppBar 的阴影高度，默认为 8.0
notchMargin	不接触效果的间隔距离

FAB notch.png

4.4 颜色与提示

具体描述见上方属性介绍，这里把改过的颜色与效果展示一下。

  FloatingActionButton _floatingActionButton(){
    return FloatingActionButton(
      child: Icon(Icons.ac_unit),
      tooltip: "我就简单的介绍一下吧",
      foregroundColor: Colors.pink,
      backgroundColor: Colors.yellow,
      splashColor: Colors.blue,
    );
  }

FAB colors.gif

4.5 形状与边框

更多样式可以参考 Flutter 组件之 RaisedButton 详解 3.3，此处不做详解。

  FloatingActionButton _floatingActionButton(){
    return FloatingActionButton(
      child: Icon(Icons.ac_unit),
      tooltip: "我就简单的介绍一下吧",
      foregroundColor: Colors.pink,
      backgroundColor: Colors.yellow,
      splashColor: Colors.blue,
      onPressed: (){
        print("test");
      },
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
        side: BorderSide(
          width: 2,
          color: Colors.red,
        ),
      ),
    );
  }

FAB border.png

4.6 点击事件

使用 onPressed 属性为 FloatingActionButton 添加一个点击事件，上述均有点击事件，不做过多介绍。

注意：onPressed == null 时，splashColor 不会产生效果。

5. 技术小结

FloatingActionButton 简单实用，但是实际用到的地方会很少。
自定义形状与边框其实在其他组件里用法基本相同。
多加练习实用，很容易上手。

Flutter入门（20）：Flutter 组件之 FloatingActionButton 详解