一、概述
TabBar的Tab之间需要有个竖线或者斜线的分隔符。
可以自定义Tab实现各种想要的效果。
本次仅提供以下几种实现方式。
1、TabBar用文字做分隔符
Widget _tabBarItem(String title, {bool showRightImage = true}) {
return Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Center(
child: Text(title),
),
),
///分割符自定义,可以放任何widget
showRightImage
? Text('/', style: TextStyle(color: Color(0xffd0d0d0), fontSize: 23))
: Text(' ', style: TextStyle(color: Color(0xffd0d0d0), fontSize: 23))
],
));
}
2、TabBar用自写任意控件做分隔符
Widget _tabBarItem(String title, {bool showRightImage = true}) {
return Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Center(
child: Text(title),
),
),
///分割符自定义,可以放任何widget
showRightImage
? Container(
width: 1,
margin: EdgeInsets.only(top: 15, bottom: 15),
color: Colors.red,
)
: Container(
width: 1,
margin: EdgeInsets.only(top: 15, bottom: 15),
)
],
));
}
3、TabBar用本地图片做分隔符
Widget _tabBarItem(String title, {bool showRightImage = true}) {
return Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Center(
child: Text(title),
),
),
///分割符自定义,可以放任何widget
showRightImage
? Container(
width: 1,
height: 15,
child: Image.asset(
'images/separator.png',
fit: BoxFit.fitHeight,
color: Colors.blueAccent,
),
)
: Container(
width: 1,
)
],
));
}