Flutter FloatingActionButton 及仿闲鱼的发布按钮

• 一、FloatingActionButton
• 二、模仿闲鱼的发布按钮
  • 1、配置 BottomNavigationBar
  • 2、创建一个符合样式的 FloatingActionButton
  • 3、将 floatingActionButton 放在 bottomNavigationBar 的中间靠上位置
  • 4、效果：
  • 5、FloatingActionButton Widget 组件的必要性
• 三、完整代码：

 

一、FloatingActionButton

运行 Flutter 默认的 Demo 可以发现右下角的有一个加号按钮

这个加号按钮正好在屏幕的右下角的那个位置，就是通过 FloatingActionButton 实现的

Scalfold 组件中有下面三个属性：

    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,

通过 floatingActionButton 可以指定一个 Widget，然后通过 floatingActionButtonLocation 可以指定 floatingActionButton 的位置

一个 FloatingActionButton 的简单使用：

floatingActionButton: FloatingActionButton(
  elevation: 0,
  child: Icon(
    Icons.add,
    size: 30,
  ),
  onPressed: () {},
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,

效果：

上面这个示例就是类似于 Flutter Demo 的按钮示例

二、模仿闲鱼的发布按钮

闲鱼应该是目前国内使用 Flutter 最大的团队吧

我们只是使用 floatingActionButton 模拟一个这样的发布按钮，闲鱼上，这个 Widget 或者是绘制应该是自己封装的或者是 Native 注册的

首先分析下，实现这样的按钮需要做什么：

• 需要一个 BottomNavigatrionBar
• 需要一个 FloatingActionButton
• 需要将 FloatingActionButton 盖在最中间的 BottomNavigationBar 上

1、配置 BottomNavigationBar

bottomNavigationBar: BottomNavigationBar(
  selectedFontSize: 12,
  unselectedFontSize: 12,
  unselectedItemColor: Colors.black,
  selectedItemColor: Colors.blue,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
    BottomNavigationBarItem(icon: Icon(Icons.add), title: Text('发布')),
    BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text('设置')),
  ],
),

效果：

2、创建一个符合样式的 FloatingActionButton

简单模拟了一下：

• 黄色背景
• 白色边框
• 黑色按钮

class FloatingActionButtonDemo extends StatelessWidget {
  const FloatingActionButtonDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(4),
      margin: EdgeInsets.only(top: 5),
      height: 50,
      width: 50,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(60),
        color: Colors.white,
      ),
      child: FloatingActionButton(
        elevation: 0,
        backgroundColor: Colors.yellow,
        child: Icon(
          Icons.add,
          color: Colors.black,
          size: 30,
        ),
        onPressed: () {},
      ),
    );
  }
}

按钮的样式效果：

3、将 floatingActionButton 放在 bottomNavigationBar 的中间靠上位置

floatingActionButton: FloatingActionButtonDemo(),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

4、效果：

5、FloatingActionButton Widget 组件的必要性

从 Scalfold.floatingActionButton 支持 Widget 就可以看出，可以配置任何我们需要的 Widget，并且放在需要的位置

比如这个 发布按钮 其实并不一定需要使用 FloatingActionButton ，比如我完全可以使用 Container 直接画出来

  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(4),
      margin: EdgeInsets.only(top: 5),
      height: 50,
      width: 50,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(60),
        color: Colors.yellow,
        border: Border.all(color: Colors.white, width: 2.0)
      ),
      child: Icon(Icons.add, color: Colors.black, size: 30),
    );
  }

效果其实一些样：

如果需要点击，则直接在 Container 外面加一个可点击的 Widget 即可，可点击 Wdiget 可以选择 InkWell

三、完整代码：

https://github.com/postbird/FlutterHelloWorldDemo/blob/master/demo1/lib/bak/main.37-FloatingActionButton%26%E9%97%B2%E9%B1%BC.dart