我想建立这样的时间表
我设法建立以下时间轴,但是小部件之间仍有一些空白。我找不到如何删除它。
这是我使用的代码:
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:app/models/timeline.dart' as tml;
class TimeLineWidget extends StatelessWidget {
final double stepWidgetWith = 200;
final double stepPadding = 16.0;
final Color color1 = Colors.green;
final Color color2 = Colors.blue;
final tml.TimeLine _timeLine = tml.TimeLine(steps: [
tml.Step(description: "Step 1"),
tml.Step(description: "Step 2"),
tml.Step(description: "Step 3"),
tml.Step(description: "Step 4"),
tml.Step(description: "Step 5"),
tml.Step(description: "Step 6"),
tml.Step(description: "Step 7")
]);
TimeLineWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
final double timeLineHeight = _computeMaxStepHeight(context, _timeLine);
return Container(
height: timeLineHeight,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
for (MapEntry<int, tml.Step> entry
in _timeLine.steps.asMap().entries) ...[
_buildDescriptionWidget(context, entry.value, entry.key),
CustomPaint(
painter: _TrianglePainter(
color1: entry.key.isEven ? this.color1 : this.color2,
color2: entry.key.isEven ? this.color2 : this.color1,
paintExtremities: entry.key != _timeLine.steps.length - 1,
),
size: Size(timeLineHeight * 2 / 3, timeLineHeight),
),
],
],
)),
);
}
Widget _buildDescriptionWidget(
BuildContext context, tml.Step step, int index) {
return Container(
constraints: BoxConstraints(maxWidth: this.stepWidgetWith),
margin: const EdgeInsets.all(0.0),
height: double.infinity,
color: index.isEven ? this.color1 : this.color2,
padding: EdgeInsets.all(this.stepPadding),
child: Text(
step.description,
style: Theme.of(context).textTheme.subtitle2,
),
);
}
double _computeMaxStepHeight(BuildContext context, tml.TimeLine timeLine) {
final TextStyle style = Theme.of(context).textTheme.subtitle2;
double maxHeight = 0.0;
timeLine.steps.forEach((step) {
final TextPainter textPainter = TextPainter(
text: TextSpan(text: step.description, style: style),
textDirection: TextDirection.ltr)
..layout(
minWidth: 0,
maxWidth: this.stepWidgetWith,
);
maxHeight = max(maxHeight, textPainter.size.height);
});
return maxHeight + 2 * this.stepPadding;
}
}
class _TrianglePainter extends CustomPainter {
final Color color1;
final Color color2;
final bool paintExtremities;
final PaintingStyle paintingStyle;
_TrianglePainter({
@required this.color1,
@required this.color2,
@required this.paintExtremities,
this.paintingStyle = PaintingStyle.fill,
});
@override
void paint(Canvas canvas, Size size) {
Paint paintBefore = Paint()
..color = color1
..style = paintingStyle;
Paint paintAfter = Paint()
..color = color2
..style = paintingStyle;
canvas.drawPath(getTrianglePath(size.width, size.height), paintBefore);
if (this.paintExtremities) {
canvas.drawPath(getExtremitiesPath(size.width, size.height), paintAfter);
}
}
Path getTrianglePath(double x, double y) {
return Path()
..moveTo(0, 0)
..lineTo(x, y / 2)
..lineTo(0, y);
}
Path getExtremitiesPath(double x, double y) {
return Path()
..moveTo(0, 0)
..lineTo(x, 0)
..lineTo(x, y / 2)
..moveTo(0, y)
..lineTo(x, y)
..lineTo(x, y / 2);
}
@override
bool shouldRepaint(_TrianglePainter oldDelegate) {
return oldDelegate.color1 != color1 ||
oldDelegate.color2 != color2 ||
oldDelegate.paintingStyle != paintingStyle;
}
}
我认为问题在于我想将Container
和CustomPainter
粘在一起,但是我找不到如何删除分隔这两个小部件的白线。