Flutter中的浮动按钮 FloatingActionButton

FloatingActionButton 简称 FAB ,能够实现浮动按钮，也能够实现相似闲鱼 app 的底部凸起导航 。

经常使用属性

FloatingActionButton的经常使用属性，同flutter中其余按钮的经常使用属性大部分相同，可是也有特殊的：

• child ：子视图，通常为 Icon，不推荐使用文字
• tooltip FAB： 被长按时显示，也是无障碍功能
• backgroundColor： 背景颜色
• elevation ：未点击的时候的阴影
• hignlightElevation ：点击时阴影值，默认 12.0
• onPressed ：点击事件回调
• shape ：能够定义 FAB 的形状等
• mini： 是不是 mini 类型默认 false 

基本使用

import 'package:flutter/material.dart';

void main(){ runApp(MyApp());}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: (){
            print('FloatingActionButton');
          },
        ),
        body:HomeContent() 
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[],
    );
  }
}

默认状况下，会在页面的右下角生成一个蓝色的浮动按钮，咱们能够在此基础上，对颜色、位置等属性进行相应的修改：

  

 FloatingActionButton与bottomNavigationBar的结合

 经过FloatingActionButton与bottomNavigationBar的结合，咱们能够实现相似闲鱼App的底部导航：

 

要实现上面的效果，有须要须要在前面的基础上添加bottomNavigationBar：

import 'package:flutter/material.dart';

void main(){ runApp(MyApp());}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add,color: Colors.black,size: 40,),
          onPressed: (){
            print('FloatingActionButton');
          },
          backgroundColor: Colors.yellow
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),
      )
    );
  }
}

此时，浮动按钮是在bottomNavigationBar的上面的，所以，咱们能够改动浮动按钮的位置，使效果更贴近理想效果：

如今，稍微好了一点，可是尚未达到理想的效果，既然位置改变不了，那么，能够经过改变大小，实现视觉的效果，前面说过，要想调节按钮的大小，须要在按钮的外层套一个Container，而后改变它的大小：

这个按钮和外面的Container是同样大的，可是在闲鱼App里面，按钮的外层是还有一圈白色边框的，也就是须要将Container设置为白色，并留出间距：

如今效果实现了，还能够结合以前的bottomNavigationBar，在浮动按钮上添加相应的功能：

 代码下载：点这里（提取码：axmg）