当前位置：首页 > article >正文

Flutter组件————FloatingActionButton

article 2024/12/22 9:11:34

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();得到震动

示例代码：

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