首页 > 建站教程 > APP开发,混合APP >  Flutter笔记10:FloatingActionButton的简单用法正文

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