這個時間軸的創(chuàng)建祭犯，因為顯示的內容是不一定的導致item的高度也是變化的，

那么需要實現這個功能就需要獲取到item的高度挣惰。

先看下效果圖

1. ?每個item都是statefulwidget

2.監(jiān)聽繪制瓷马。

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();

? ? ///? 監(jiān)聽是否渲染完

? ? 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),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ),

? ? ? ? ? ),

? ? ? ? ],

? ? ? ),

? ? );

? }

}