Flutter 悬浮按钮 FloatingActionButton 的详细配置使用

Flutter 中 FloatingActionButton 是用来实现悬浮按钮效果的

class ScffoldHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScffoldHomePageState();
  }
}

class ScffoldHomePageState extends State<ScffoldHomePage> {

  ///当前选中的页面
  num index =0;

  @override
  Widget build(BuildContext context) {
    ///使用 Scaffold 组件来构建应用的基本页面
    /// 页面的架构
    return Scaffold(
      ///定义页面的标题
      appBar: AppBar(
        title: Text("这里是首页"),
      ),
      ///定义的页面的主体内容
      body:pageWidgetList[index],
      ///定义的悬浮按钮
      floatingActionButton: FloatingActionButton(
        child: Text("++"),
        ///点击响应事
        onPressed: () {
          print("点击了 FloatingActionButton");
        },
        ///长按提示
        tooltip: "点击了 tooltip s ",
        ///设置悬浮按钮的背景
        backgroundColor: Colors.red,
        ///获取焦点时显示的颜色
        focusColor: Colors.green,
        ///鼠标悬浮在按钮上时显示的颜色
        hoverColor: Colors.yellow,
        ///水波纹颜色
        splashColor: Colors.deepPurple,
        ///定义前景色 主要影响文字的颜色
        foregroundColor: Colors.black,
        ///配制阴影高度 未点击时
        elevation: 0.0,
        ///配制阴影高度 点击时
        highlightElevation: 20.0,
      ),
      ///用来控制  FloatingActionButton 的位置
      ///FloatingActionButtonLocation.endFloat 默认使用 浮动右下角
      ///FloatingActionButtonLocation.endDocked 右下角
      ///FloatingActionButtonLocation.endTop  右上角
      ///FloatingActionButtonLocation.startTop 左上角
      ///FloatingActionButtonLocation.centerFloat 底部中间浮动
      ///FloatingActionButtonLocation.centerDocked 底部中间不浮动
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
    );
  }
}