Flutter FloatingActionButton 及仿闲鱼的发布按钮

最新推荐文章于 2024-06-24 07:26:57 发布

barnett_y

最新推荐文章于 2024-06-24 07:26:57 发布

阅读量1.4k

点赞数

分类专栏：【Flutter点滴知识】

原文链接：http://www.ptbird.cn/flutter-floatingactionbutton.html

版权

【Flutter点滴知识】专栏收录该内容

397 篇文章 75 订阅

订阅专栏

一、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),
    );
  }

效果其实一些样：