Flutter 物流页面实现

Flutter 物流页面实现

flutter 物流效果这块实现比较少，而且效果都不是我想要的，就自己写了一个简单风格的物流页面，有需要的同学可以参考下。数据来自于后台接口。
原文链接：https://blog.csdn.net/weixin_44259356/article/details/106015770

效果

关键代码

数据源

  _load() async {
    await WebService(context)
        .getLogistics("ZTO".toString(),73129268351637.toString());
    setState(() {
      Global.profile.logisticsMessage != null? logisticsMessage = Global.profile.logisticsMessage:showTextDialog(context,'获取数据失败');
      print(logisticsMessage);
    });
  }

List Widget数据整理

  List<Widget> logisticsListItem(context){
    List<Widget> logisticsList=new List<Widget>();
    int i=1;
    if(logisticsMessage!=null)
      for(int n= logisticsMessage["Traces"].length-1;n>=0;--n,++i)
        logisticsList.add(i==logisticsMessage["Traces"].length?menuListItem(context,logisticsMessage["Traces"][n],i,true):menuListItem(context,logisticsMessage["Traces"][n],i,false));
//顺序
      /*    logisticsMessage["Traces"].forEach((item){
      ++i;
      logisticsList.add(i==logisticsMessage["Traces"].length?menuListItem(context,item,i,true):menuListItem(context,item,i,false));
    });*/

    logisticsList.length==0?logisticsList.add(Center(child: Text("暂无物流信息"))):print(logisticsList);
    return logisticsList;
  }

每一项item

  Widget menuListItem(context,value,i,bool) {
    double height=1;
    if(bool)
      height=0;
    return i==1 ?
    Container(
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.only(top: 0.0, left: 0.0,bottom:0.0), //容器外填充
        padding: EdgeInsets.only(top: 15.0, left: 15.0,right:15.0,bottom:0), //容器内填充
        child: Card(
          margin:EdgeInsets.only(left:15.0,right: 15),
          elevation: 0,
          child:
          Column(
            crossAxisAlignment: CrossAxisAlignment
                .start,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    width: 80,
                    child: Text("${value['AcceptTime']}",
                      style: TextStyle(fontSize: 15.0,height: 1.28,color: Color(0xFF999999)),
                      maxLines:2,
                      textAlign: TextAlign.justify,
                      overflow: TextOverflow.visible,
                    ),
                  ),

                  Padding(
                      padding: const EdgeInsets.only(top: 26.0,left: 6.5,right: 6.5),
                      child:Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Image(
                            image: AssetImage("imgs/wlxq_icon_zhuangtai.png"),
                            height: 11,
                            width: 11,
                            fit: BoxFit.fill,
                          ),
                          SizedBox(
                            width: 1,
                            height: 28,
                            child: DecoratedBox(
                              decoration: BoxDecoration(color: Color(0xFFCCCCCC)),
                            ),
                          ),
                        ],
                      ),
                  ),

                  Container(
                    width: MediaQuery.of(context).size.width-165,
                    child: Text("${value['AcceptStation']}",
                      style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.bold,height: 1.28),
                      maxLines:3,
                      textAlign: TextAlign.justify,
                      overflow: TextOverflow.visible,
                    ),
                  ),
                ],
              ),
              //垂直分割线
              Padding(
                //左边添加像素补白
                padding: const EdgeInsets.only(left: 91.5),
                child: SizedBox(
                  width: 1,
                  height: height,
                  child: DecoratedBox(
                    decoration: BoxDecoration(color: Color(0xFFCCCCCC)),
                  ),
                ),
              ),

            ],
          ),
        ),
    )
        :
    Container(
      width: MediaQuery.of(context).size.width,
      margin: EdgeInsets.only(top: 0.0, left: 0.0,bottom:0.0), //容器外填充
      padding: EdgeInsets.only(top: 0, left: 15.0,right:15.0,bottom:0), //容器内填充
      child: Card(
        margin:EdgeInsets.only(left:15.0,right: 15),
        elevation: 0,
        child:
        Column(
          crossAxisAlignment: CrossAxisAlignment
              .start,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: 80,
                  child: Text("${value['AcceptTime']}",
                    style: TextStyle(fontSize: 15.0,height: 1.28,color: Color(0xFF999999)),
                    maxLines:2,
                    textAlign: TextAlign.justify,
                    overflow: TextOverflow.visible,
                  ),
                ),

                Padding(
                  padding: height==0?EdgeInsets.only(bottom: 32,left: 10.0,right: 10.5):EdgeInsets.only(bottom: 0,left: 10.0,right: 10.5),
                  child:Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      SizedBox(
                        width: 1,
                        height: 32,
                        child: DecoratedBox(
                          decoration: BoxDecoration(color: Color(0xFFCCCCCC)),
                        ),
                      ),
                      Image(
                        image: AssetImage("imgs/wlxq_icon_quan.png"),
                        height: 4,
                        width: 4,
                        fit: BoxFit.fill,
                      ),
                      SizedBox(
                        width: 1,
                        height: height==0?0:32,
                        child: DecoratedBox(
                          decoration: BoxDecoration(color: Color(0xFFCCCCCC)),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  width: MediaQuery.of(context).size.width-165,
                  child: Text("${value['AcceptStation']}",
                    style: TextStyle(fontSize: 15.0,height: 1.28,color: Color(0xFF999999)),
                    maxLines:3,
                    textAlign: TextAlign.justify,
                    overflow: TextOverflow.visible,
                  ),
                ),
              ],
            ),
            //垂直分割线
            Padding(
              //左边添加像素补白
              padding: const EdgeInsets.only(left: 91.5),
              child: SizedBox(
                width: 1,
                height: height,
                child: DecoratedBox(
                  decoration: BoxDecoration(color: Color(0xFFCCCCCC)),
                ),
              ),
            ),

          ],
        ),
      ),
    );
  }