笔录Flutter(十一) FloatingActionButton

Flutter练习Demo

FloatingActionButton也是经常用的，除了常见的悬浮在右下角的一个按钮，还可以利用floatingActionButtonLocation属性，控制位置的展示。

1. floatingActionButtonLocation

源码：

// Flutter 默认对其方式
  static const FloatingActionButtonLocation endFloat = _EndFloatFloatingActionButtonLocation();
  
  //居中[FloatingActionButton]，浮动在屏幕底部。
  static const FloatingActionButtonLocation centerFloat = _CenterFloatFloatingActionButtonLocation();
  
  static const FloatingActionButtonLocation endDocked = _EndDockedFloatingActionButtonLocation();

  static const FloatingActionButtonLocation centerDocked = _CenterDockedFloatingActionButtonLocation();

  static const FloatingActionButtonLocation startTop = _StartTopFloatingActionButtonLocation();

  static const FloatingActionButtonLocation miniStartTop = _MiniStartTopFloatingActionButtonLocation();

  static const FloatingActionButtonLocation endTop = _EndTopFloatingActionButtonLocation();


//..

使用：
属性可自行尝试

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

2. 闲鱼app底部导航中间凸起的一个按钮。就是利用FloatingActionButton实现的

 Scaffold(
      body: this._mList[this.currentIndex],
      bottomNavigationBar: _getBottomNavigationBar(),
      floatingActionButton: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
        ),
        padding: EdgeInsets.all(5),
        margin: EdgeInsets.only(top: 20),
        width: 55,
        height: 55,
        child: FloatingActionButton(
          foregroundColor: Colors.red,
          // 利用三元表达式控制选中时的颜色
            backgroundColor:
                currentIndex == 1 ? Color(0xff46CAD0) : Colors.blue,
            //点击时按钮的阴影效果
            highlightElevation: 0,
            elevation: 0,
            child: IconButton(
                icon: Image.asset(
              "images/tax_unselect.png",
              color: Colors.white,
              width: 20,
              height: 20,
            )),
            onPressed: () {
              setState(() {
              // 选中时更改currentIndex值，这样就可以实现点击FloatingActionButton，同步切花底部导航对应的界面
                this.currentIndex = 1;
              });
            }),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );

效果：