Flutter BottomAppBar 自定义路径 + 贝塞尔曲线实现闲鱼底部导航

网上已经有不少文章展示如何使用 CircularNotchedRectangle 或 AutomaticNotchedShape 实现带凹陷效果的 BottomAppBar，但是都没有提到如何自定义 NotchedShape 实现任意形状的 BottomAppBar，本文以闲鱼底部导航为例展示如何自定义 NotchedShape。

首先假设你已经知道如何使用 CircularNotchedRectangle 创建凹陷效果，我们主要做的就是写一个新的 class 继承 NotchedShape 来实现我们想要的效果。

在开始写 NotchedShape 之前我们先准备好一个正常的 BottomAppBar，因为不是重点，具体的实现就不展开说了，看起来像是这样的：

唯一值得一提的是，中间的按钮是一个正常的 FloatingActionButton ，为了让它比原来大并能超出 BottomAppBar 而使用了 Transform.scale 。

接下来，我们创建新的 class CustomNotchedShape 继承 NotchedShape 并 override getOuterPath ：

NotchedShape 和 CustomClipper<Path> 很像，都是通过创建一个 path 来定义我们想要的形状，如果你有 CustomClipper<Path> 的经验，那 NotchedShape 也就差不多了。唯一不一样的是 Path getOuterPath(Rect host, Rect? guest) 有两个参数， host 在这里就是 BottomAppBar 本身的矩形边界， guest 则是嵌入 BottomAppBar 的矩形边界。由于我们并不需要嵌入 guest，第二个参数可以忽略掉。

我们可以先简单写一个梯形 path 来验证。

效果：

知道怎么使用 path 创建自定义形状之后就可以思考如何实现闲鱼底部导航的效果了，经过观察，这样的效果可以由圆弧或贝塞尔曲线组合而成，使用贝塞尔曲线可能是最简单的，而且只需要一个控制点的贝塞尔曲线。

我们可以先画轮廓直线，然后再换成单个控制点的贝塞尔曲线即可。

lx 和 ly 是旁边两条斜线的 x、y，radius 是顶部横线的长度。

然后我们替换成贝塞尔曲线以及选择合适的控制点，再引入两个变量 bx、by 作为控制点的 x、y 偏移量，所有参数调整到合适到值之后即可实现最终效果：

源码： https://github.com/qiuxiang/custom_notched_shape

DartPad 在线演示： https://dartpad.dev/?null_safety=true&id=a976bbb3961a8c5f5998a54c8d2ed7aa

这个roughike是这个项目的所有者（大神致敬）。

我用的是android studio开发，fragment全部导的V4的包（以为最开始就支持的是v4的，后面也支持了app.fragment）.

首先是dependenciescompile "com.jakewharton:butterknife:7.0.0"compile "com.roughike:bottom-bar:1.3.3"

添加第二个就行了，我这用到了butterknife（不知道的可以百度，出自jakewharton大神的一款View注入框架）。

从menu添加items

res/menu/bottombar_menu.xml

日常开发中 我们可能会用到 SearchDelegate 来实现一个搜索页面

但是对外只暴露了以下几个接口

如果我们想自定义 TextField , 修改hintText内容

或者AppBar下还想添加一个bottom怎么办呢, 这边提供一个方法以供参考

定义一个ASearchDelegate 继承自 SearchDelegate, 把SearchDelegate 源码都拷进来(material\search.dart) 

showSearch方法也换个名 showASearch(内部类可以都加个A前缀以区分, 同时继承一下原有类)

接着 找到_ASearchPageState 的build方法 

会返回一个Semantics 对象, 其实整个搜索页面就在这里定义的啦

ok, 就在这里自由发挥了

下图是题主的改动

对应调用处则调整为: showASearch(context, ASearchDelegate())

效果图:

---