Flutter 类似物流的 时间轴 ListView 时间轴

这个时间轴的创建，因为显示的内容是不一定的导致item的高度也是变化的，

那么需要实现这个功能就需要获取到item的高度。

先看下效果图

1.  每个item都是statefulwidget

2.监听绘制。

3.获取高度

4.刷新setState

下面是代码  哈哈  写的好与不好见谅   

import 'package:flutter/material.dart';

class LogisticsInformationItemextends StatefulWidget {

   ColortopColor;

  ColorcenterColor;

  ColorbottomColor;

  ColortextColor;

  Stringtext;

  LogisticsInformationItem({

this.topColor,

    this.centerColor,

    this.bottomColor,

    this.textColor,

    this.text,

  });

  @override

  _LogisticsInformationItemStatecreateState() =>_LogisticsInformationItemState();

}

class _LogisticsInformationItemStateextends State {

doubleitem_height =0.0;

  GlobalKeytextKey =new GlobalKey();

  @override

  void initState() {

// TODO: implement initState

    super.initState();

    ///  监听是否渲染完

    WidgetsBinding widgetsBinding = WidgetsBinding.instance;

    widgetsBinding.addPostFrameCallback((callback){

///  获取相应控件的size

      RenderObject renderObject =textKey.currentContext.findRenderObject();

      setState(() {

item_height = renderObject.semanticBounds.size.height;

      });

    });

  }

@override

  Widgetbuild(BuildContext context) {

return Container(

color: Colors.white,

      padding:EdgeInsets.only(left:20, right:10),

      child:Row(

children: [

///  左侧的线

          Container(

margin:EdgeInsets.only(left:20),

            width:10,

            height:item_height,

            child:Column(

mainAxisAlignment: MainAxisAlignment.center,

              children: [

Expanded(

child:Container(

width:0.9,

                      color:widget.topColor,

                    )

),

                Container(

height:10,

                  width:10,

                  decoration:BoxDecoration(

color:widget.centerColor,

                    borderRadius:BorderRadius.all(Radius.circular(5)),

                  ),

                ),

                Expanded(

child:Container(

width:0.9,

                      color:widget.bottomColor,

                    )

),

              ],

            ),

          ),

          ///  右侧的文案

          Expanded(

child:Padding(

key:textKey,

              padding:const EdgeInsets.only(left:20, top:10, bottom:10),

              child:Text(

widget.text,

                style:TextStyle(fontSize:15, color:widget.textColor),

              ),

            ),

          ),

        ],

      ),

    );

  }

}