Flutter之FloatingActionButton组件

/**
    const FloatingActionButton({
    Key key,
    this.child,//按钮显示的内容
    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,//FloatingActionButton有regular, mini, extended三种类型,默认为false即regular类型,true时按钮变小即mini类型,extended需要通过FloatingActionButton.extended()创建,可以定制显示内容
    this.shape = const CircleBorder(),//定义FAB的shape,设置shape时,默认的elevation将会失效,默认为CircleBorder
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.isExtended = false,//是否为”extended”类型
    })
 */
FloatingActionButton 构造函数方式创建
floatingActionButton: FloatingActionButton(
          onPressed: () => print("FloatingActionButton"),
          child: Text("button"),
          tooltip: "按这么长时间干嘛",
          foregroundColor: Colors.red,
//          backgroundColor: Colors.red,
//          mini: true,
//            shape: CircleBorder()
        ),

FloatingActionButton extended方式创建
floatingActionButton: FloatingActionButton.extended(
  icon: Icon(Icons.alarm), label: Text("文本"), onPressed: () {},
),
设置FloatingActionButton位置
//centerDocked 底部中间
//endDocked 底部右侧
//centerFloat 中间偏上
//endFloat 底部偏上
home: Scaffold(
        appBar: AppBar(
          title: Text("FloatingActionButton"),
        ),
        body: Container(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () => print("FloatingActionButton"),
          child: Text("button"),
        ),
      ),

码云地址:https://gitee.com/xgljh/Flutter.git

你可能感兴趣的:(Flutter之FloatingActionButton组件)