简介

FloatingAction Button “浮动动作按钮”

FloatingActionButton 按钮是一个圆形图标按钮，悬停在内容上以提升应用程序中的主要操作。浮动操作按钮最常用于Scaffold.floatingActionButton字段中;
每个屏幕最多使用一个浮动操作按钮。浮动操作按钮应用于积极操作，例如“创建”，“共享”或“导航”;
一般用来处理界面中最常用，最基础的用户动作。它一般出现在屏幕内容的前面，通常是一个圆形，中间有一个图标。 FAB有三种类型：regular, mini, extended。不要强行使用FAB，只有当使用场景符合FAB功能的时候使用才最为恰当;

基本用法

默认参数的 button 和禁用 button

如果 onPressed 回调为null，则该 button 将被禁用，并且不会对触摸作出反应,不会变成灰色;

进阶用法1

更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等

进阶用法2

更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等

实例演示

import 'package:flutter/material.dart';

/*
* OutlineButton 默认按钮的实例
* isDisabled:是否是禁用，isDisabled 默认为true
* */
class FloatingActionButtonDefault extends StatelessWidget {
  final bool isDisabled;

  const FloatingActionButtonDefault([ this.isDisabled = true])
      : assert(isDisabled != null),
        super();

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
        // 文本内容
        backgroundColor:Colors.red,
        child: const Icon(Icons.add),
        heroTag: null, // 不加这个参数会黑屏...
        onPressed: isDisabled ? () {} : null);
  }
}

/*
* OutlineButton 自定义的实例
* */
class FloatingActionButtonCustom extends StatelessWidget {
  final String txt;
  final Color color;
  final ShapeBorder shape;
  final VoidCallback onPressed;

  const FloatingActionButtonCustom(
      [ this.txt = '自定义按钮',
       this.color = Colors.orange,
       this.shape,
       this.onPressed])
      : super();

  @override
  Widget build(BuildContext context) {
    final _onPressed = onPressed;
    return  FloatingActionButton(
      // 子视图，一般为Icon，不推荐使用文字
      child: const Icon(Icons.refresh),
      // FAB的文字解释，FAB被长按时显示，也是无障碍功能
      tooltip: txt,
      // 前景色
      foregroundColor: Colors.white,
      // 背景色
      backgroundColor: color,
     // hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果,简单理解为两个界面内拥有同样tag的元素在界面切换过程中，会有动画效果，是界面切换不再那么生硬。
      heroTag: null,
      // 未点击时阴影值，默认6.0
      elevation: 7.0,
      // 点击时阴影值，默认12.0
      highlightElevation: 14.0,
      // 点击事件回调
      onPressed: () {
        Scaffold.of(context).showSnackBar( SnackBar(
          content: Text("FAB is Clicked"),
        ));
        _onPressed();
      },
      // 是否为“mini”类型，默认为false,FAB 分为三种类型：regular, mini, and extended
      mini: false,
      // 定义FAB的shape，设置shape时，默认的elevation将会失效,默认为CircleBorder
      //shape: CircleBorder(),
      shape: shape,
      // 是否为”extended”类型
      isExtended: true
    );
  }
}

/*
* OutlineButton 自定义的实例2
* */
class FloatingActionButtonCustom2 extends StatelessWidget {
  final String txt;
  final Color color;
  final ShapeBorder shape;
  final VoidCallback onPressed;

  const FloatingActionButtonCustom2(
      [ this.txt = '自定义按钮',
         this.color = Colors.orange,
         this.shape,
         this.onPressed])
      : super();

  @override
  Widget build(BuildContext context) {
    final _onPressed = onPressed;
    return FloatingActionButton.extended(
      onPressed: () {
        print('button click');
        _onPressed();
      },
      foregroundColor: Colors.white,
      backgroundColor: Colors.amber,
      //如果不手动设置icon和text颜色,则默认使用foregroundColor颜色
      icon:  Icon(Icons.flag,color: Colors.red),
      label:  Text('FloatingActionButton.extended', maxLines: 1),
    );
  }
}