flutter物流纵向时间轴布局

1.轴线

class MySeparatorVertical extends StatelessWidget {
    
    
  final Color color;

  const MySeparatorVertical({
    
    this.color = Colors.black});

  @override
  Widget build(BuildContext context) {
    
    
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
    
    
        final height = constraints.constrainHeight();
        final dashWidth = 4.0;
         final dashCount = (height / (2 * dashWidth)).floor();

         //实线
        /*return Flex(
          direction: Axis.vertical,
          children: [
            Container(
              width: 1,
              height: height,
              color: color,
            )
          ],
        );*/

        //虚线
        return Flex(
          children: List.generate(dashCount, (_) {
    
    
            return SizedBox(
              width: 1,
              height: dashWidth,
              child: DecoratedBox(
                decoration: BoxDecoration(color: color),
              ),
            );
          }),
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          direction: Axis.vertical,
        );
      },
    );
  }
}

2.布局

Container(
      margin: EdgeInsets.only(top: 10),
      padding: EdgeInsets.fromLTRB(20, 30, 20, 30),
      color: Colors.white,
      child: Column(
        children: widget.expressList.map((element) {
    
    
          return _expressItem(element);
        }).toList(),
      ),
    )
Widget _expressItem(Data item) {
    
    
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
            child: Stack(
          children: [
            Container(
              padding: EdgeInsets.only(left: 37),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    height: 4,
                  ),
                  Row(
                    children: [
                      Expanded(
                          child: Text(
                        '${
      
      item.context}',
                        style:
                            TextStyle(fontSize: 14, color: Color(0xffa3a3a3)),
                      ))
                    ],
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                  Text(
                    '${
      
      item.time}',
                    style: TextStyle(fontSize: 12, color: Color(0xff666666)),
                    softWrap: true,
                  ),
                  SizedBox(
                    height: 12.0,
                  ),
                ],
              ),
            ),
            Positioned(
                left: 0,
                width: 37,
                bottom: 0,
                top: 0,
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      item == widget.expressList[0]?Container(
                        height: 28.w,
                        width: 28.w,
                        child: Image.asset(PathConfig.iconSelect,),
                      ):
                      ClipOval(
                        child: Container(
                          width: 22.w,
                          height: 22.w,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(7),
                            color: Colors.white,
                            border: Border.all(color: Color(0xffe5e5e5),width: 1)
                          ),

                        ),
                      ),
                      item == widget.expressList[widget.expressList.length-1]?Container():
                      Expanded(
                          child: Container(
                            width: 27,
                            child: MySeparatorVertical(
                              color: Color(0xffe5e5e5),
                            ),
                          ))
                    ],
                  ),
                ))
          ],
        ))
      ],
    );
  }