Flutter 自定义TabBar样式
站长
· 阅读数 1
TabBar基本属性
TabBar的基本构造方法和含义
const TabBar({
Key? key,
required this.tabs, // 一般使用Tab对象,当然也可以是其他的Widget
this.controller, // TabController对象
// 1、是否可滚动这个属性需要尤为注意，当你的tab数量很少又想要均分屏幕宽度可以设置isScrollable为false，
// 1、同时外层的container需要设置宽度为屏幕宽度
// 2、当你的tab数量很多想要平均分可以设置isScrollable为true
this.isScrollable = false,
this.padding, // 内边距
this.indicatorColor, // 指示器颜色
this.automaticIndicatorColorAdjustment = true, // 是否自动调整indicatorColor
this.indicatorWeight = 2.0, //指示器宽度
this.indicatorPadding = EdgeInsets.zero, // 指示器内边距
this.indicator, // 指示器decoration，例如边框等
this.indicatorSize, // 指示器大小计算方式
this.labelColor, // 选中tab文字颜色
this.labelStyle, // 选中tab文字样式
this.labelPadding, // 选中文字内边距
this.unselectedLabelColor, // 非选中文字颜色
this.unselectedLabelStyle, // 非选中文字样式
this.dragStartBehavior = DragStartBehavior.start,
this.overlayColor, // 响应焦点、悬停和飞溅颜色
this.mouseCursor, // 鼠标指针进入或悬停在鼠标指针上时的光标
this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈
this.onTap, // 单击Tab时的回调
this.physics, // TabBar的滚动视图如何响应用户输入
})
//******************************************************
注意！！！：如果想自定义tab的宽度和左右的间距需要同时设置两个属性：
this.isScrollable = true
this.labelPadding = const EdgeInsets.all(0),
TabBar的基本使用
Widget _buildListTab() {
return Container(
color: const Color(0xffF1F1F1),
child: Column(
children: [
Expanded(
child: DefaultTabController(
length: 6,
child: Column(
children: [
Container(
color: Colors.white,
child:TabBar(
isScrollable: true,
indicatorSize: TabBarIndicatorSize.label,
indicatorColor: Colors.blue,
labelColor: Colors.black,
unselectedLabelColor: Colors.black54,
tabs: [
const TCTab(text: "测试1"),
const TCTab(text: "测试2"),
const TCTab(text: "测试3"),
const TCTab(text: "测试4"),
const TCTab(text: "测试5"),
const TCTab(text: "测试6"),
],
)
),
Expanded(
child: TabBarView(children: [
// 下面所对应的页面都是可以自定义要显示的内容的Widget，实现已省略
_buildTabWidget(""), // 对应【测试1】页面
_buildTabWidget(""), // 对应【测试2】页面
_buildTabWidget(""), // 对应【测试3】页面
_buildTabWidget(""), // 对应【测试4】页面
_buildTabWidget(""), // 对应【测试5】页面
_buildTabWidget(""), // 对应【测试6】页面
]),
),
],
)),
),
],
),
);
}
显示的效果如下：
如上图所示已经知道TabBar的基本使用，本文主要讨论指示条的自定义过程，详细的的使用这里不过多赘述，让我们想一个问题：指示器的样式和位置在已有的TabBar中没办法调整，例如我们想让指示横条可以往上走一点，宽度可以自定义，并且还能是四角圆角该怎么实现呢？
自定义Tbabbr
通过TabBar提供的属性我们可以发现，指示横条对应的属性indicator我们可以进行自定义，找到这个属性
这样我们就可以通过复写UnderlineTabIndicator中的内容来自定义自己想要的indicator。值的注意的是:对于不同版本的Flutter，可能存在UnderlineTabIndicator实现的不同，所以直接copy网上的自定义代码会有报错的可能。以我使用的Flutter版本为例（flutter --version）
Flutter 2.10.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c860cba910 (1 year, 4 months ago) • 2022-03-25 00:23:12
-0500
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2
我的自定义UnderlineTabIndicator如下：
// ignore_for_file: unnecessary_null_comparison
import 'package:flutter/material.dart';
// ignore: implementation_imports
import 'package:flutter/src/foundation/diagnostics.dart';
class TCUnderlineTabIndicator extends Decoration {
const TCUnderlineTabIndicator({
this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
this.insets = EdgeInsets.zero,
this.indicatorBottom = 0.0,
this.indicatorWidth = 28,
this.isRound = false,
}) : assert(borderSide != null),assert(insets != null);
final BorderSide borderSide;
final EdgeInsetsGeometry insets;
final double indicatorBottom; // 自定义指示条距离底部距离
final double indicatorWidth; // 自定义指示条宽度
final bool? isRound; // 自定义指示条是否是圆角
@override
Decoration? lerpFrom(Decoration? a, double t) {
if (a is TCUnderlineTabIndicator) {
return TCUnderlineTabIndicator(
borderSide: BorderSide.lerp(a.borderSide, borderSide, t),
insets: EdgeInsetsGeometry.lerp(a.insets, insets, t)!,
);
}
return super.lerpFrom(a, t);
}
@override
Decoration? lerpTo(Decoration? b, double t) {
if (b is TCUnderlineTabIndicator) {
return TCUnderlineTabIndicator(
borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
insets: EdgeInsetsGeometry.lerp(insets, b.insets, t)!,
);
}
return super.lerpTo(b, t);
}
@override
BoxPainter createBoxPainter([ VoidCallback? onChanged ]) {
return _UnderlinePainter(this, onChanged, isRound ?? false);
}
Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
assert(rect != null);
assert(textDirection != null);
final Rect indicator = insets.resolve(textDirection).deflateRect(rect);
// return Rect.fromLTWH(
// indicator.left,
// indicator.bottom - borderSide.width,
// indicator.width,
// borderSide.width,
// );
//取中间坐标
double cw = (indicator.left + indicator.right) / 2;
// ***************************这里可以自定义指示条的宽度和底部间距***************************
Rect indictorRect = Rect.fromLTWH(cw - indicatorWidth / 2, indicator.bottom - borderSide.width-indicatorBottom, indicatorWidth, borderSide.width);
return indictorRect;
}
@override
Path getClipPath(Rect rect, TextDirection textDirection) {
return Path()..addRect(_indicatorRectFor(rect, textDirection));
}
}
class _UnderlinePainter extends BoxPainter {
_UnderlinePainter(this.decoration, VoidCallback? onChanged, this.isRound)
: assert(decoration != null),
super(onChanged);
final TCUnderlineTabIndicator decoration;
bool isRound = false;
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
assert(configuration != null);
assert(configuration.size != null);
final Rect rect = offset & configuration.size!;
final TextDirection textDirection = configuration.textDirection!;
final Rect indicator = decoration._indicatorRectFor(rect, textDirection).deflate(decoration.borderSide.width / 2.0);
//***************************这里可以自定义指示条是否是圆角***************************
final Paint paint = decoration.borderSide.toPaint()..strokeCap = isRound ? StrokeCap.round : StrokeCap.square;
canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
}
}
const double _kTextAndIconTabHeight = 72.0;
enum TabBarIndicatorSize {
tab,
label,
}
class TCTab extends StatelessWidget implements PreferredSizeWidget {
const TCTab({
Key? key,
this.text,
this.icon,
this.iconMargin = const EdgeInsets.only(bottom: 10.0),
this.height,
this.child,
this.tabBarHeight = 44,
}) : assert(text != null || child != null || icon != null),assert(text == null || child == null),super(key: key);
final String? text;
final Widget? child;
final Widget? icon;
final EdgeInsetsGeometry iconMargin;
final double? height;
final double tabBarHeight; // 自定义tab的高度
Widget _buildLabelText() {
return child ?? Text(text!, softWrap: false, overflow: TextOverflow.fade);
}
@override
Widget build(BuildContext context) {
assert(debugCheckHasMaterial(context));
final double calculatedHeight;
final Widget label;
if (icon == null) {
calculatedHeight = tabBarHeight;
label = _buildLabelText();
} else if (text == null && child == null) {
calculatedHeight = tabBarHeight;
label = icon!;
} else {
calculatedHeight = _kTextAndIconTabHeight;
label = Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: iconMargin,
child: icon,
),
_buildLabelText(),
],
);
}
// ***********************tab的高度在这里定义****************************
return SizedBox(
height: height ?? calculatedHeight,
child: Center(
widthFactor: 1.0,
child: label,
),
);
}
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.add(StringProperty('text', text, defaultValue: null));
properties.add(DiagnosticsProperty<Widget>('icon', icon, defaultValue: null));
}
@override
Size get preferredSize {
if (height != null)
return Size.fromHeight(height!);
else if ((text != null || child != null) && icon != null)
return const Size.fromHeight(_kTextAndIconTabHeight);
else
return Size.fromHeight(tabBarHeight);
}
}
使用代码和效果图显示如下：
Widget _buildListTab() {
return Container(
color: const Color(0xffF1F1F1),
child: Column(
children: [
Expanded(
child: DefaultTabController(
length: 6,
child: Column(
children: [
Container(
color: Colors.white,
child:TabBar(
labelColor: Colors.black,
unselectedLabelColor: const Color(0xFF666666),
labelStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
unselectedLabelStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.normal),
isScrollable: true,
indicator: const TCUnderlineTabIndicator(
indicatorBottom: 6,
indicatorWidth: 28,
borderSide: BorderSide(
width: 3,
color: Color(0xFF1989FA),
)
),
tabs: [
const TCTab(text: "测试1"),
const TCTab(text: "测试2"),
const TCTab(text: "测试3"),
const TCTab(text: "测试4"),
const TCTab(text: "测试5"),
const TCTab(text: "测试6"),
],
);
),
Expanded(
child: TabBarView(children: [
// 下面所对应的页面都是可以自定义要显示的内容的Widget
_buildTabWidget(""), // 对应【测试1】页面
_buildTabWidget(""), // 对应【测试2】页面
_buildTabWidget(""), // 对应【测试3】页面
_buildTabWidget(""), // 对应【测试4】页面
_buildTabWidget(""), // 对应【测试5】页面
_buildTabWidget(""), // 对应【测试6】页面
]),
),
],
)),
),
],
),
);
}
总结
对于Flutter TabBar的自定义样式重点关注的就是重写UnderlineTabIndicator和Tab对外暴露出可以扩展的属性，大概就这么多，希望对大家有所帮助！
参考资料：