Flutter IntrinsicHeight实现流程轴

1,067 阅读1分钟

简单的时间流程轴

效果图 使用IntrinsicHeight来实现,根据右边widget的动态高度,来确定左边widget的高度,

import 'package:flutter/material.dart';

class TakeAwayTimeProcessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<TakeAwayBean> datas = List<TakeAwayBean>()
      ..add(TakeAwayBean()
        ..des = "已签收,可以做出评价,感谢下次光临!"
        ..time = "2020-10-24 12:45")
      ..add(TakeAwayBean()
        ..des = "外卖小哥努力配送中..."
        ..time = "2020-10-24 12:30")
      ..add(TakeAwayBean()
        ..des = "外卖到商家领取外卖,大约需要20分钟,6公里,5个红绿灯"
        ..time = "2020-10-24 12:25")
      ..add(TakeAwayBean()
        ..des = "外卖小哥接单啦!"
        ..time = "2020-10-24 12:18")
      ..add(TakeAwayBean()
        ..des = "商家接单,开始订做"
        ..time = "2020-10-24 12:10");

    return Scaffold(
      appBar: AppBar(
        title: Text("外卖流程轴"),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        child: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            TakeAwayBean bean = datas[index];
            return Container(
              child: IntrinsicHeight(
                child: Row(
                  children: [
                    Container(
                      alignment: Alignment.center,
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Column(
                            children: [
                              Expanded(
                                  child: Container(
                                color: Colors.grey
                                    .withOpacity(index == 0 ? 0 : .5),
                                width: 1,
                              )),
                              Expanded(
                                  child: Container(
                                color: Colors.grey.withOpacity(
                                    index == datas.length - 1 ? 0 : .5),
                                width: 1,
                              ))
                            ],
                          ),
                          index == 0
                              ? Icon(
                                  Icons.check_circle,
                                  color: Colors.blue,
                                )
                              : Icon(
                                  Icons.fiber_manual_record,
                                  color: Colors.grey.withOpacity(.5),
                                ),
                        ],
                      ),
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Expanded(
                      child: Container(
                        padding:
                            EdgeInsets.symmetric(vertical: 20, horizontal: 20),
                        margin: EdgeInsets.symmetric(vertical: 10),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(8)),
                            border: Border.all(
                                color: Colors.grey[300], width: 1.4)),
                        child: Row(
                          children: [
                            Expanded(
                              child: Text(bean.des),
                            ),
                            Padding(
                              padding: EdgeInsets.only(left: 12),
                              child: Text(bean.time),
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
            );
          },
          itemCount: datas.length,
        ),
      ),
    );
  }
}

class TakeAwayBean {
  String des;
  String time;
}