FloatingActionButton 是一个悬浮在内容上的圆形图标按钮,每个屏幕中最多使用一个浮动按钮。
const FloatingActionButton({
Key key,
this.child,// 子组件 一般为Icon
this.tooltip,// 文字解释,长按时显示
this.foregroundColor,// 前景色
this.backgroundColor, // 背景色
this.heroTag = const _DefaultHeroTag(), // hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果
this.elevation = 6.0, // 未点击时的阴影值
this.highlightElevation = 12.0, // 点击时的阴影值
@required this.onPressed, // 点击事件回调
this.mini = false, // 是否是 mini类型
this.shape = const CircleBorder(), // 设置shape时,默认的elevation将会失效,默认为CircleBorder
this.clipBehavior = Clip.none, //
this.materialTapTargetSize,
this.isExtended = false, // 是否为”extended”类型
})
class _MyHomeState extends State<_MyHome> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("ToDoList")),
// 浮动按钮
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
}
}
FloatingActionButton.extended 创建一个类似足球场形状的浮动按钮,可同时存在label和icon。不过label是必须的,icon是可选的。
FloatingActionButton.extended({
Key key,
this.tooltip,
this.foregroundColor,
this.backgroundColor,
this.heroTag = const _DefaultHeroTag(),
this.elevation = 6.0,
this.highlightElevation = 12.0,
double disabledElevation,
@required this.onPressed,
this.shape = const StadiumBorder(),
this.isExtended = true,
this.materialTapTargetSize,
this.clipBehavior = Clip.none,
Widget icon,
@required Widget label,
})
class _MyHomeState extends State<_MyHome> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("ToDoList")),
// 浮动按钮 icon + label
floatingActionButton: FloatingActionButton.extended(
onPressed: () {},
label: Text("新增"),
icon: Icon(Icons.add),
),
);
}
}