Flutter入门-- FloatingActionButton

FloatingActionButton 是一个悬浮在内容上的圆形图标按钮，每个屏幕中最多使用一个浮动按钮。

const FloatingActionButton({
  Key key,
  this.child,// 子组件 一般为Icon
  this.tooltip,// 文字解释，长按时显示
  this.foregroundColor,// 前景色
  this.backgroundColor, // 背景色
  this.heroTag = const _DefaultHeroTag(), // hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果
  this.elevation = 6.0, // 未点击时的阴影值
  this.highlightElevation = 12.0, // 点击时的阴影值
  @required this.onPressed, // 点击事件回调
  this.mini = false, // 是否是 mini类型
  this.shape = const CircleBorder(), // 设置shape时，默认的elevation将会失效,默认为CircleBorder
  this.clipBehavior = Clip.none, // 
  this.materialTapTargetSize,
  this.isExtended = false, // 是否为”extended”类型
})

FloatingActionButton

class _MyHomeState extends State<_MyHome> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("ToDoList")),
      // 浮动按钮
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

FloatingActionButton.extended 创建一个类似足球场形状的浮动按钮，可同时存在label和icon。不过label是必须的，icon是可选的。

FloatingActionButton.extended({
  Key key,
  this.tooltip,
  this.foregroundColor,
  this.backgroundColor,
  this.heroTag = const _DefaultHeroTag(),
  this.elevation = 6.0,
  this.highlightElevation = 12.0,
  double disabledElevation,
  @required this.onPressed,
  this.shape = const StadiumBorder(),
  this.isExtended = true,
  this.materialTapTargetSize,
  this.clipBehavior = Clip.none,
  Widget icon,
  @required Widget label,
})

FloatingActionButton.extended

class _MyHomeState extends State<_MyHome> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("ToDoList")),
      // 浮动按钮 icon + label
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        label: Text("新增"),
        icon: Icon(Icons.add),
      ),
    );
  }
}