首先假设你已经知道如何使用 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
这可铅锋能是因为你在闲鱼上发布了你的代码作业,这样其他用户就可以看到你的代码作业,并且可以查看其中的内容。此外,可能还有其他人把你的代码作业发布到闲鱼上,让其他用户能扮卖够看到你的代码作业厅激逗。欢迎分享,转载请注明来源:内存溢出
评论列表(0条)