[英]Flutter: How to make Custom Underline Tab Indicator with Border Radius
如何制作指标:带边框半径的 UnderlinetabIndicator? 这种装饰不喜欢具有边框半径的下划线输入边框。
我试图用 ShapeDecoration(UnderlineInputBorder) 来实现它。 但是 shapeDecoration 的大小从选项卡小部件中计算,所以我不能有正确的borderRadius topright 和 topleft。
*不要介意颜色,它只是为了调试目的。
TabBar(
controller: _tabController,
labelStyle:
TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
indicatorWeight: 10.0,
unselectedLabelColor: Colors.black,
labelColor: Colors.black,
indicatorSize: TabBarIndicatorSize.tab,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(
width: 5.0,
color: HexColor("2C7381"),
),
insets:
EdgeInsets.symmetric(horizontal: 10.0, vertical: 0),
),
tabs: [
Container(
color: Colors.amber,
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Column(
children: [
Image.asset(
_activeIndex == 0
? "assets/icons/dummy1.png"
: "assets/icons/dummy2.png",
height: 20,
),
SizedBox(
height: 5,
),
Text(
"TAB 0",
style: Dummytheme.text14theme,
textAlign: TextAlign.center,
),
],
),
),
),
你可以使用这个参数
import 'package:flutter/material.dart';
class CustomTabIndicator extends Decoration {
final double radius;
final Color color;
final double indicatorHeight;
const CustomTabIndicator({
this.radius = 8,
this.indicatorHeight = 4,
this.color = Colors.red,
});
@override
_CustomPainter createBoxPainter([VoidCallback? onChanged]) {
return _CustomPainter(
this,
onChanged,
radius,
color,
indicatorHeight,
);
}
}
class _CustomPainter extends BoxPainter {
final CustomTabIndicator decoration;
final double radius;
final Color color;
final double indicatorHeight;
_CustomPainter(
this.decoration,
VoidCallback? onChanged,
this.radius,
this.color,
this.indicatorHeight,
) : super(onChanged);
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
assert(configuration.size != null);
final Paint paint = Paint();
double xAxisPos = offset.dx + configuration.size!.width / 2;
double yAxisPos = offset.dy + configuration.size!.height - indicatorHeight/2;
paint.color = color;
RRect fullRect = RRect.fromRectAndCorners(
Rect.fromCenter(
center: Offset(xAxisPos, yAxisPos),
width: configuration.size!.width / 3,
height: indicatorHeight,
),
topLeft: Radius.circular(radius),
topRight: Radius.circular(radius),
);
canvas.drawRRect(fullRect, paint);
}
}
使用:指标:CustomTabIndicator(),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.