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), // //按钮内部组件
      ),
    );
  }
}

效果


相关推荐
一个处女座的程序猿O(∩_∩)O1 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink5 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
向前看-7 小时前
验证码机制
前端·后端
燃先生._.8 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖8 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235249 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240259 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar9 小时前
纯前端实现更新检测
开发语言·前端·javascript