【Flutter】时间轴高度自适应最佳实践

1 使用部件

画圆圈：使用 canvas.drawCircle 和属性为_paint.style = PaintingStyle.fill;画笔画两个实心圆；
画竖线：使用 canvas.drawLine 和属性为_paint.style = PaintingStyle.stroke;的画笔画直线，通过 p1 和 p2 两个端点使直线为竖线

在 Container 中调用 decoration 组件使用 BorderTimeLine 类。

decoration: BoxDecoration(border: BorderTimeLine(i)),

3 代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TimeLine',
      home: _Home(),
    );
  }
}

class _Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("TimeLineSimple")),
      body: Container(
          child: ListView.builder(
              itemBuilder: _buildItem,
              padding: EdgeInsets.symmetric(vertical: 20),
              itemCount: 20),
      ),
    );
  }

  Widget _buildItem(BuildContext c, int i) {
    return Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(border: BorderTimeLine(20)),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
            Text(
                "00:13",
                style: TextStyle(
                    color: Color.fromARGB(255, 102, 102, 102),
                    fontSize: 16,
                )),
            Padding(padding: EdgeInsets.symmetric(vertical: 5)),
            Text(
              "Twin Health raises 140M to manage diabetes, other chronic conditions.The startup, which says it uses “digital twins” to help people manage their diabetes, recently raised a series C round led by ICONIQ Growth. It uses data from connected devices, blood tests and consultations to come up with personalized recommendations. ",
              style: TextStyle(
                fontSize: 16,
              ),
            ),
            Padding(padding: EdgeInsets.symmetric(vertical: 5)),
            Row(
              children: [
                DecoratedBox(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5.0),
                      color: Color.fromARGB(255, 233, 236, 241),
                    ),
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
                    child: Text(
                      "Health",
                      style: TextStyle(
                        fontSize: 15,
                        color: Color.fromARGB(255, 80, 112, 151),
                      ),
                    ),
                  ),
                ),
                Padding(padding: EdgeInsets.symmetric(horizontal: 5.0)),
                DecoratedBox(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.0),
                    color: Color.fromARGB(255, 233, 236, 241),
                  ),
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
                    child: Text(
                      "IoT",
                      style: TextStyle(
                        fontSize: 15,
                        color: Color.fromARGB(255, 80, 112, 151),
                      ),
                    ),
                  ),
                ),
                Padding(padding: EdgeInsets.symmetric(horizontal: 5.0)),
                DecoratedBox(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.0),
                    color: Color.fromARGB(255, 233, 236, 241),
                  ),
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
                    child: Text(
                      "Twin",
                      style: TextStyle(
                        fontSize: 15,
                        color: Color.fromARGB(255, 80, 112, 151),
                      ),
                    ),
                  ),
                ),
              ],
            )
          ]),
        )
    );
  }
}

class BorderTimeLine extends BorderDirectional {
  int position;

  BorderTimeLine(this.position);

  double radius = 5;
  double margin = 20;
  Paint _paint = Paint()
    ..strokeWidth = 2;

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection, BoxShape shape = BoxShape.rectangle, BorderRadius borderRadius}) {
    if (position != 0) {
      canvas.drawLine(Offset(rect.left + margin + radius / 2 , rect.top + radius * 4), Offset(rect.left + margin + radius / 2, rect.bottom), _strokePaint());
      canvas.drawCircle(Offset(rect.left + margin + radius / 2, rect.top + radius * 2), radius, _fillPaint_grey());
      canvas.drawCircle(Offset(rect.left + margin + radius / 2, rect.top + radius * 2), radius * 1 / 2, _fillPaint_white());
    } else {
      canvas.drawLine(Offset(rect.left + margin + radius / 2, rect.top + radius * 4), Offset(rect.left + margin + radius / 2, rect.bottom), _strokePaint());
      canvas.drawCircle(Offset(rect.left + margin + radius / 2, rect.top + radius * 2), radius, _fillPaint_blue());
      canvas.drawCircle(Offset(rect.left + margin + radius / 2, rect.top + radius * 2), radius * 1 / 2, _fillPaint_white());
    }
  }

  Paint _fillPaint_blue() {
    _paint.color = Color.fromARGB(255, 79, 112, 154);
    _paint.style = PaintingStyle.fill;
    return _paint;
  }

  Paint _fillPaint_white() {
    _paint.color = Colors.white;
    _paint.style = PaintingStyle.fill;
    return _paint;
  }

  Paint _fillPaint_grey() {
    _paint.color = Color(0xFFDDDDDD);
    _paint.style = PaintingStyle.fill;
    return _paint;
  }

  Paint _strokePaint() {
    _paint.color = Color(0xFFDDDDDD);
    _paint.style = PaintingStyle.stroke;
    return _paint;
  }
}