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

Posted 2021-09-19 早起的年轻人

志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

• Flutter 从入门 到精通系列文章在这里
• 当然也必需是要有源码的 在这里了
• github 有点慢 不妨来看看码云的源码吧
• 系列学习教程在这里

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,
    );
  }
}