Flutter-小部件之间的剩余空间

时间:2020-02-09 19:28:11

标签: flutter

我想建立这样的时间表

enter image description here

我设法建立以下时间轴,但是小部件之间仍有一些空白。我找不到如何删除它。 enter image description here

这是我使用的代码:

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;
  }
}

我认为问题在于我想将ContainerCustomPainter粘在一起,但是我找不到如何删除分隔这两个小部件的白线。

0 个答案:

没有答案