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

小鱼儿 2023-10-07 17:05 16阅读 0赞

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

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

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

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

[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github _]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00
[FloatingActionButton]: https://edu.csdn.net/learn/25543