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

效果


相关推荐
木木黄木木1 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning212 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一2 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla2 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡3 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu3 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c3 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪3 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆3 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻3 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html