【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