Flutter笔记10:FloatingActionButton的简单用法

FloatingActionButton简称FAB，可以放在Scaffold的floatingActionButton属性中使用，也可以单独拿出来作为独立的Widget使用，FloatingActionButton还有个扩展的功能，可以做出带文字+图标的效果的按钮：

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'),
              )
            ],
          ),
        ));
  }
}