flutter - 颤动箭头标签栏?
问题描述
我怎样才能用这样的箭头制作标签栏的光标?
解决方案
您可以使用自定义画家和制表符来实现您的愿望指标。
import 'package:flutter/material.dart';
class Delete extends StatefulWidget {
Delete({Key key}) : super(key: key);
@override
_DeleteState createState() => _DeleteState();
}
class _DeleteState extends State<Delete> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
indicatorSize: TabBarIndicatorSize.tab,
indicator: CircleTabIndicator(color: Colors.orange),
tabs: <Widget>[
Tab(
child: Text(
'fruits',
),
),
Tab(
child: Text(
'vegetables',
),
),
Tab(
child: Text(
'berries',
),
),
],
),
),
body: TabBarView(
children: <Widget>[
Center(child: Text('Tab 1')),
Center(child: Text('Tab 2')),
Center(child: Text('Tab 3')),
],
),
),
);
}
}
class CircleTabIndicator extends Decoration {
final BoxPainter _painter;
CircleTabIndicator({@required Color color})
: _painter = _CirclePainter(color);
@override
BoxPainter createBoxPainter([onChanged]) => _painter;
}
class _CirclePainter extends BoxPainter {
final Paint _paint;
_CirclePainter(Color color)
: _paint = Paint()
..color = color
..isAntiAlias = true;
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
Path _trianglePath = Path();
_trianglePath.moveTo(cfg.size.width / 2 - 10, cfg.size.height);
_trianglePath.lineTo(cfg.size.width / 2 + 10, cfg.size.height);
_trianglePath.lineTo(cfg.size.width / 2, cfg.size.height - 10);
_trianglePath.lineTo(cfg.size.width / 2 - 10, cfg.size.height);
_trianglePath.close();
canvas.drawPath(_trianglePath, _paint);
}
}
推荐阅读
- python - 在熊猫数据框中查找列的经度和纬度
- webpack - 带有 Less 和 Source Map 的 Webpack - 奇怪的路径行为
- java - PrintWritter 在 java 中打印 POS 泰米尔语字符
- javascript - `simulate` 的第二个参数应该接受什么?
- symfony - 多个 TransChoice 用法
- c# - 如何将参数从 LINQ 查询传递到 SQL 视图?
- java - 如何使用@PostMapping()?
- android - 如何将现有的 sqlite 表迁移到具有 VCHAR、TIMESTAMP 等数据类型的 ROOM Db?
- android - Android数据绑定 - 找不到属性的getter
- java - Java:方法语句无序执行