一步一步搭建Flutter开发架子-Tabbar

一点点搭建一个架构,架构对于开发比较重要,有固定的模式,第一不容易产生bug,并且有利于对于项目以及开发架构的理解。 对于一个app,常见的架构一般是底部有Tabbar形式,或者采用抽屉的形式,底部Tabbar大部分app都是平铺的,中间有一块凸出来的形式。

普通Tabbar

 比较简单代码直接贴出来了

 @override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: normalBottomBar(),
);
}
normalBottomBar() {
return BottomNavigationBar(
// 底部导航
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
activeIcon: Icon(Icons.access_alarm)),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'search'),
BottomNavigationBarItem(icon: Icon(Icons.people), label: 'mine'),
],
currentIndex: _selectedIndex,
fixedColor: Colors.blue,
elevation: 10, // default: 8.0
type: BottomNavigationBarType.fixed,
iconSize: 30,
selectedFontSize: 12, // 默认是14,未选择是14
onTap: _onItemTapped,
);
}
_onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}

中间凸出的Tabbar

官方的Material风格库中存在这种效果,不过个人感觉跟现在流行的风格有点不太匹配,所以封装了一个接近于现在流行风格的Tabbar。 刚开始的效果是这样的:  凸出的按钮封装了一下的代码片段:

import 'dart:math';

import 'package:flutter/material.dart';

class CenterNavigationItem extends StatefulWidget {
CenterNavigationItem({Key key, this.onTap}) : super(key: key);

final Function onTap;

@override
_CenterNavigationItemState createState() => _CenterNavigationItemState();
}

class _CenterNavigationItemState extends State<CenterNavigationItem> {
@override
Widget build(BuildContext context) {
return Stack(
children: [
// CustomPaint(size: Size(76, 76), painter: MyPainter()),
Container(
width: 76,
height: 76,
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Color.fromRGBO(250, 250, 250, 1),
borderRadius: BorderRadius.circular(38)),
child: FloatingActionButton(
child: Icon(Icons.add),
// child: TextField(),
tooltip: '测试', // 长按弹出提示
onPressed: () {
widget.onTap();
}),
),
],
);
}
}
// 主页面引用:
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: CenterNavigationItem(
onTap: () {
setState(() {
_selectedIndex = 1;
});
},
),
bottomNavigationBar: normalBottomBar(),
);
}

感觉还是差点意思, 在于底部线与线直接连接的不够平滑 

带有动画效果的Tabbar

继续改造一下的想法就是通过CustomPainter去画一个半圆。效果如下:  代码片段:

class MyPainter extends CustomPainter {
@override
paint(Canvas canvas, Size size) {
Paint paint = Paint()
..isAntiAlias = false
..color = Colors.green
..strokeCap = StrokeCap.round
..strokeWidth = 0
..style = PaintingStyle.stroke;
print(pi);
canvas.drawArc(
new Rect.fromCircle(center: Offset(38, 38), radius: size.width / 2),
pi,
2 * pi * 0.5,
false,
paint);
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}

在凸出的按钮封装的代码中添加:

class _CenterNavigationItemState extends State<CenterNavigationItem> {
@override
Widget build(BuildContext context) {
return Stack(
children: [
CustomPaint(size: Size(76, 76), painter: MyPainter()),
class _CenterNavigationItemState extends State<CenterNavigationItem> {
@override
Widget build(BuildContext context) {
return Stack(
children: [
// 这个位置加入!!!!!!!!!!
CustomPaint(size: Size(76, 76), painter: MyPainter()),
Container(
width: 76,
height: 76,
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Color.fromRGBO(250, 250, 250, 1),
borderRadius: BorderRadius.circular(38)),
child: FloatingActionButton(
child: Icon(Icons.add),
// child: TextField(),
tooltip: '测试', // 长按弹出提示
onPressed: () {
widget.onTap();
}),
),
],
);
}
}
],
);
}
}

最终就是这个效果。还有就是也不能闭门造车,上网搜搜大家都是怎么去构建Tabbar的。其中在github上发现一个加入了动画的开源代码。Motion-Tab-Bar。分析了一波代码,看了一眼效果如下: 

稍加修改了一下,留着以后项目可能用的上。over~欢迎讨论

one more thing...

  • 1, 路由管理,
  • 2, 国际化管理,
  • 3, 数据持久化管理,
  • 4, 响应式管理方法


作者:一天清晨
链接:https://juejin.cn/post/6933496106827546632
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

0 个评论

要回复文章请先登录注册