这段时间一直在学习 Flutter，在 dribble 上看到一张导航栏设计图，就是下面这张，感觉很是喜欢，于是思考着如何在 Flutter 中实现这个效果。
设计图作者：Lukáš Straňák
经过一番研究，大体上算是实现了效果（有些地方还是需要改进的），如下：
这篇文章和大家分享一下实现过程，一起交流、学习。
实现过程
实现这个效果主要用到了 AnimationController 和 CustomPaint，切换导航时进行重新绘制。
搭建页面骨架
首先搭建一下整个页面的骨架：
class FloatNavigator extends StatefulWidget {
_FloatNavigatorState createState() => _FloatNavigatorState();
}
class _FloatNavigatorState extends State<FloatNavigator>
with SingleTickerProviderStateMixin {
Widget build(BuildContext context) {
return Container(
child: Stack(children: [
Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text('Float Navigator'),
centerTitle: true,
),
backgroundColor: Color(0xFFFF0035),
),
Positioned(
bottom: 0.0,
child: Container(
width: width,
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
//浮动图标
//所有图标
],
),
),
)
]),
);
}
}
这里将图中的导航分成两个部分，一个是浮动图标，另一个是所有图标，浮动图标在点击的时候会移动到所有图标中对应图标的位置，而所有图标上的圆弧状缺口也会一起移动。
定义变量
在 _FloatNavigatorState 定义一些变量，以供使用：
int _activeIndex = 0; //激活项
double _height = 48.0; //导航栏高度
double _floatRadius; //悬浮图标半径
double _moveTween = 0.0; //移动补间
double _padding = 10.0; //浮动图标与圆弧之间的间隙
AnimationController _animationController; //动画控制器
Animation<double> _moveAnimation; //移动动画
List _navs = [
Icons.search,
Icons.ondemand_video,
Icons.music_video,
Icons.insert_comment,
Icons.person
]; //导航项
接着在 initState 中对一些变量做初始化：
void initState() {
_floatRadius = _height * 2 / 3;
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 400));
super.initState();
}
这里我将悬浮图标的半径设置为导航栏高度的三分之二，动画时长设置为 400 毫秒，当然这里面的参数都是可以改动的。
绘制悬浮图标
//悬浮图标
Positioned(
top: _animationController.value <= 0.5
? (_animationController.value * _height * _padding / 2) -
_floatRadius / 3 * 2
: (1 - _animationController.value) *
_height *
_padding /
2 -
_floatRadius / 3 * 2,
left: _moveTween * singleWidth +
(singleWidth - _floatRadius) / 2 -
_padding / 2,
child: DecoratedBox(
decoration:
ShapeDecoration(shape: CircleBorder(), shadows: [
BoxShadow( //阴影效果
blurRadius: _padding / 2,
offset: Offset(0, _padding / 2),
spreadRadius: 0,
color: Colors.black26),
]),
child: CircleAvatar(
radius: _floatRadius - _padding, //浮动图标和圆弧之间设置10pixel间隙
backgroundColor: Colors.white,
child: Icon(_navs[_activeIndex], color: Colors.black)),
),
)
这里的 top 值看上去很复杂，但实际上并没什么特别的，只是为了让悬浮图标上下移动而已，_animationController 产生的值为 0.0 到 1.0，因此，这里判断如果小于等于 0.5，就让图标向下移动，大于 0.5 则向上移动（移动距离可以随意修改）。
left 做横向移动，这里使用的是 _moveTween，因为移动的距离是 singleWidth 的倍数（当然最终移动距离还要减去半径及间隙，这里的倍数是指列如从索引 0 移动到索引 3 这之间途径的导航项长度）。
绘制所有图标
再向下就是重头戏了，所有图标的绘制：
CustomPaint(
child: SizedBox(
height: _height,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: _navs
.asMap()
.map((i, v) => MapEntry(
i,
GestureDetector(
child: Icon(v,
color: _activeIndex == i
? Colors.transparent
: Colors.grey),
onTap: () {
_switchNav(i);
},
)))
.values
.toList(),
),
),
painter: ArcPainter(
navCount: _navs.length,
moveTween: _moveTween,
padding: _padding),
)
这里需要用到索引来确定每次点击的是第几个导航，所以用到了 asMap 和 MapEntry，ArcPainter 就是用来绘制背景的，来看一下绘制背景的实现（不要慌，_switchNav 方法我会在后面解释的）：
//绘制圆弧背景
class ArcPainter extends CustomPainter {
final int navCount; //导航总数
final double moveTween; //移动补间
final double padding; //间隙
ArcPainter({this.navCount, this.moveTween, this.padding});
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = (Colors.white)
..style = PaintingStyle.stroke; //画笔
double width = size.width; //导航栏总宽度，即canvas宽度
double singleWidth = width / navCount; //单个导航项宽度
double height = size.height; //导航栏高度，即canvas高度
double arcRadius = height * 2 / 3; //圆弧半径
double restSpace = (singleWidth - arcRadius * 2) / 2; //单个导航项减去圆弧直径后单边剩余宽度
Path path = Path() //路径
..relativeLineTo(moveTween * singleWidth, 0)
..relativeCubicTo(restSpace + padding, 0, restSpace + padding / 2,
arcRadius, singleWidth / 2, arcRadius) //圆弧左半边
..relativeCubicTo(arcRadius, 0, arcRadius - padding, -arcRadius,
restSpace + arcRadius, -arcRadius) //圆弧右半边
..relativeLineTo(width - (moveTween + 1) * singleWidth, 0)
..relativeLineTo(0, height)
..relativeLineTo(-width, 0)
..relativeLineTo(0, -height)
..close();
paint.style = PaintingStyle.fill;
canvas.drawPath(path, paint);
}
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
先将整个导航栏背景的外框绘制出来，再填充成白色，就能得到我们想要的带圆弧形缺口的形状。Flutter 中的绘制方法有两种（并不完全是这样，有的方法只有一种），拿 relativeLineTo 来说，与其对应的另一个方法是 lineTo。两者的区别在于，relativeLineTo 在绘制结束后，会将结束点作为新的坐标系原点（0，0），而 lineTo 的原点始终在左上角（这个说法不严谨，两个方法的原点都是左上角，这里的意思是，它不会移动）。我这里使用的 relative* 方法就是因为不用绘制一笔后还要考虑下一笔开始的位置，比较方便，我很喜欢。
这里最复杂（对我来说）的就是圆弧部分的绘制了，用到了三次贝塞尔曲线（自己手工在草稿纸上画了一下每个点的位置，没办法，就是这么菜），需要注意的是，在绘制完圆弧左半边后，原点移动到了圆弧最底部，因此绘制右半边圆弧的坐标与左半边是相反的，剩下的就直接画就行。
实现动画控制
最后一步，实现 _FloatNavigatorState 中的动画控制方法 _switchNav:
//切换导航
_switchNav(int newIndex) {
double oldPosition = _activeIndex.toDouble();
double newPosition = newIndex.toDouble();
if (oldPosition != newPosition &&
_animationController.status != AnimationStatus.forward) {
_animationController.reset();
_moveAnimation = Tween(begin: oldPosition, end: newPosition).animate(
CurvedAnimation(
parent: _animationController, curve: Curves.easeInCubic))
..addListener(() {
setState(() {
_moveTween = _moveAnimation.value;
});
})
..addStatusListener((AnimationStatus status) {
if (status == AnimationStatus.completed) {
setState(() {
_activeIndex = newIndex;
});
}
});
_animationController.forward();
}
}
这里每次点击切换导航的时候都重新给 _moveAnimation 的 begin 和 end 赋值，来确定要移动的真正距离，当动画执行完成后，更新当前激活项。
还有一点，差点漏了，销毁动画控制器：
void dispose() {
_animationController.dispose();
super.dispose();
}
至此，代码就写完了，看一下动态效果：
五个导航项
四个导航项
三个导航项
感觉导航项少一些似乎更好看，完整代码请点这里
结语
只能说大体上实现了这个效果，但还是有一些不足：
- 圆弧在移动的时候，途径的导航项图标没有隐藏
- 悬浮图标中的图标是在动画执行结束后才切换的新图标
这些不足还是会让最终效果不那么完美，但现已足够。