在Flutter
中,我如何绘制下图所示的边框半径选项卡指示器?
下面的代码只能绘制我在github
中找到的圆圈指示器。
TabBar(
isScrollable: true,
controller: _tabController,
labelColor: Colors.black,
tabs: <Widget>[
Tab(
text: 'DOTTED',
),
Tab(
text: 'Tab',
),
Tab(
text: 'INDICATOR',
),
],
indicator: DotIndicator(
indicatorColor: Colors.black,
radius: 3,
),
indicatorWeight: 2 * kDefaultDotIndicatorRadius,
),
库:
const kDefaultDotIndicatorRadius = 3.0;
class DotTabIndicator extends Decoration {
const DotTabIndicator({this.indicatorColor, this.radius = kDefaultDotIndicatorRadius});
final Color indicatorColor;
final double radius;
@override
BoxPainter createBoxPainter([onChanged]) {
return _DotPainter(this, onChanged);
}
}
class _DotPainter extends BoxPainter {
_DotPainter(this.decoration, VoidCallback onChanged) : super(onChanged);
final DotTabIndicator decoration;
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
final center = configuration.size.center(offset);
final dy = configuration.size.height;
final newOffset = Offset(center.dx, dy - 8);
final paint = Paint();
paint.color = decoration.indicatorColor;
paint.style = PaintingStyle.fill;
canvas.drawCircle(newOffset, decoration.radius, paint);
}
}
检查此
class CustomIndicator extends StatelessWidget {
var radius = Radius.circular(10);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text("Custom Indicator"),
bottom: TabBar(
tabs: <Widget>[
Tab(
text: "Hello",
),
Tab(
text: "Megan",
),
],
indicator: ShapeDecoration(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topRight: radius, topLeft: radius)),
color: Colors.red
),
),
),
body: TabBarView(
children: <Widget>[
Container(
child: Center(
child: Text("Hello"),
),
),
Container(
child: Center(
child: Text("Hi"),
),
)
],
),
),
);
}
}
输出: