class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'FloatingActionButton', home: Scaffold( appBar: AppBar( title: Text('FloatingActionButton'), ), //scaffold的floatingActionButton属性 floatingActionButton: FloatingActionButton( backgroundColor: Colors.blue, child: Icon(Icons.add), onPressed: () {}, ), body: Column( children: [ //普通的单独的FloatingActionButton组件 FloatingActionButton( //背景色 backgroundColor: Colors.red, //前景色 foregroundColor: Colors.blue, //hero动画需要用到 heroTag: null, //未点击时阴影 elevation: 0, //点击时阴影(长按) highlightElevation: 16, //图标 child: Icon(Icons.add), //提示信息(长按时显示) tooltip: '这是一个提示', //点击事件 onPressed: () {}, //是否为“mini”类型,默认false,FAB分为三种大小:regular、mini、extended,extended可以加label mini: true, //样式--方形(默认圆形) // shape: Border.all( // width: 2.0, color: Colors.white, style: BorderStyle.solid), //样式--圆角矩形(默认圆形) shape: RoundedRectangleBorder( side: BorderSide( color: Colors.white, width: 2, style: BorderStyle.solid), borderRadius: BorderRadius.only( topRight: Radius.circular(2.0), topLeft: Radius.circular(2.0), bottomRight: Radius.circular(2.0), bottomLeft: Radius.circular(2.0), ))), //FAB扩展 FloatingActionButton.extended( onPressed: () {}, icon: Icon(Icons.explicit), label: Text('这是一个扩展的icon'), ) ], ), )); } }
Flutter笔记10:FloatingActionButton的简单用法
FloatingActionButton简称FAB,可以放在Scaffold的floatingActionButton属性中使用,也可以单独拿出来作为独立的Widget使用,FloatingActionButton还有个扩展的功能,可以做出带文字+图标的效果的按钮: