修改网站图标公司网站seo外包
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});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();}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), // //按钮内部组件),);}
}
效果
