Flutter组件————FloatingActionButton

FloatingActionButton 是Flutter中的一个组件,通常用于显示一个圆形的按钮,它悬浮在内容之上,旨在吸引用户的注意力,并代表屏幕上的主要动作。这种按钮是Material Design的一部分,通常放置在页面的右下角,但也支持自定义位置。

参数

参数名 类型 描述
onPressed VoidCallback 用户点击按钮时触发的回调函数;如果为null,则按钮将被禁用。
child Widget 按钮内部的widget,通常是图标或文本。
tooltip String 当长按按钮时显示的提示信息。
backgroundColor Color 按钮的背景颜色,默认使用主题色。
foregroundColor Color 按钮内图标或文本的颜色。
elevation double 设置按钮的阴影大小,默认值根据Material Design规范设置。
focusColor Color 按钮获得焦点时的颜色。
hoverColor Color 鼠标悬停在按钮上时的颜色。
shape ShapeBorder 定义按钮的形状,默认是一个圆形,可以通过 CircleBorder 或其他 ShapeBorder 类来自定义。
mini bool 一个布尔值,用于创建更小版本的浮动操作按钮。
isExtended bool 表示是否是扩展版的浮动按钮,适用于 FloatingActionButton.extended 构造函数。
materialTapTargetSize MaterialTapTargetSize 定义了按钮可点击区域的大小,对于无障碍性很重要。
autofocus bool 指定此按钮是否应该自动聚焦。默认值为false。
clipBehavior Clip 定义如何裁剪子部件,例如是否允许内容溢出边界。
enableFeedback bool 是否启用触觉反馈(如震动),默认为true。
splashFactory InteractiveInkFeatureFactory 定义了点击时产生的涟漪效果类型,默认为 InkRipple.splashFactory

enableFeedback有情况会无法触发,建议手动在回调方法中调用HapticFeedback.vibrate();得到震动

示例代码:

dart 复制代码
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //所有下方行为按钮
  List<Widget> actionList = const [
    Icon(Icons.social_distance),
    SizedBox(
      width: 30,
    ),
    Icon(Icons.cyclone),
    SizedBox(
      width: 30,
    ),
    Icon(Icons.manage_accounts),
    SizedBox(
      width: 40,
    )
  ];

  void floatBtnFunc () {
    debugPrint("点击了悬浮按钮");
    HapticFeedback.vibrate();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 顶部栏代码。。。。。。。。。。。。。
      ), //顶部栏
      body: Center(
        child: ListView(
          padding: const EdgeInsets.only(top: 15),
          children: const [
            Row(
              children: [
                Text("按钮示例")
              ],
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: floatBtnFunc, //点击事件
        tooltip: "悬浮按钮", //长按提示信息
        backgroundColor: Colors.blue, //背景颜色
        foregroundColor: Colors.white, // 内部组件颜色
        elevation: 10,  //阴影
        shape: ShapeBorder.lerp(
          const CircleBorder(),
          const CircleBorder(),
          0.5
        ),  //按钮形状
        mini: false, //是否小尺寸
        hoverColor: Colors.green, //悬浮颜色
        splashColor: Colors.yellow, //点击颜色
        focusColor: Colors.red, //获取焦点颜色
        autofocus: true,  //是否自动获取焦点
        
        clipBehavior: Clip.hardEdge, //裁剪方式
        child: const Icon(Icons.info), // //按钮内部组件
      ),
    );
  }
}

效果


相关推荐
Mintopia10 分钟前
JavaScript 中的计算机图形学核心知识点详解
前端·javascript·计算机图形学
恋猫de小郭16 分钟前
Flutter 在 Dart 3.8 开始支持 Null-Aware Elements 语法,自动识别集合里的空元素
android·前端·flutter
智绘前端16 分钟前
Nuxt3中使用UnoCSS指南
前端·chrome
john_Asura17 分钟前
Vue3 自定义指令完全指南
前端·javascript·vue.js·npm·html
墨渊君20 分钟前
还原 Mac Dock 栏动效: 一步步打造流畅的波形缩放动画
前端·css·react.js
凌览25 分钟前
4.4K Star 的 chrome-remote-interface 竟有这样的神功,不用写浏览器插件轻松搞定账号密码自动化填充
前端·后端·trae
独立开阀者_FwtCoder40 分钟前
用分层结构扩展你的 React 项目
前端·javascript·后端
独立开阀者_FwtCoder44 分钟前
AI 神器!一键把 Vue3 源码解析成文档!
前端·javascript·vue.js
观默1 小时前
90分钟从想法到发布,我是这样做的
前端·ai编程
筱筱°1 小时前
Vue 登录 记住密码,设置存储时间
前端·javascript·vue.js