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

Posted 2023-04-27

参考技术A 网上已经有不少文章展示如何使用 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

在 Flutter 中嵌套 Scaffold 是不是正确？ [关闭]

【中文标题】在 Flutter 中嵌套 Scaffold 是不是正确？ [关闭]

【英文标题】：Is it correct to have nested Scaffold in Flutter? [closed]在 Flutter 中嵌套 Scaffold 是否正确？ [关闭]

【发布时间】：2021-02-13 11:41:03

【问题描述】：

我的应用主页中有一个 PageView，我想要：

AppBar根据页面变化 BottomAppBar 已修复

我想象的两个解决方案是：

难点：拥有一个带有appBar、body和bottomNavigationBar的Scaffold；使用 PageView 的 PageController 为 AppBar 内容设置动画... 有 2 个嵌套的 Scaffold：主要的一个带有 body 和 bottomNavigationBar，第二个在每个 PageView 的页面中，带有 AppBar...

所以我想知道，它可以工作，但在语法上嵌套 Scaffold 是否“正确”？

非常感谢！

【参考方案1】：

我想是的。 脚手架就像 imo 的任何其他小部件一样。 它非常方便，因为它为您提供了应用栏、正文等。 我通常将其作为 SafeArea 小部件的子组件，以便该应用考虑现代智能手机上的凹槽。

【参考方案2】：

去这里：https://api.flutter.dev/flutter/material/Scaffold-class.html

有一个名为 Troubleshooting 的部分，在里面你会发现：

嵌套脚手架

Scaffold 被设计为单个顶层容器，用于 MaterialApp 并且通常不需要嵌套脚手架。为了 选项卡式 UI 中的示例，其中 bottomNavigationBar 是 TabBar，并且 body 是一个 TabBarView，你可能很想制作每个标签栏 查看具有不同标题 AppBar 的脚手架。会更好 为更新 AppBar 的 TabController 添加一个监听器。

【讨论】：

感谢您的帮助，我没有看到这些指南。我选择保留一个带有 body 和 bottom 的 Scaffold，并且 body 将 AppBar 定义在 Column 中。这个选项比动画 AppBar 更容易跟随 PageController...