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