flutter 自定义时间轴

最新推荐文章于 2024-08-12 08:31:02 发布

丶流言

最新推荐文章于 2024-08-12 08:31:02 发布

阅读量705

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/qq_42772570/article/details/115366209

版权

Flutter 专栏收录该内容

45 篇文章 4 订阅

订阅专栏

在这里插入图片描述
复制进项目改一下自己喜欢的样式就可以用
源码如下：



import 'package:flutter/material.dart';

class TimeLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('时间轴'),
      ),
      body: buildContent(true),
    );
  }

  double leftWidth=20;

  //是否签收 当前块可以自己diy
  buildContent(bool result){
    return  Container(
      alignment: Alignment.centerLeft,
      child: Column(
        children: [
          Row(
            children: [
              buildCircle(result),//圆点
              SizedBox(width: 10,),
              Container(
                child: Text('${result?"已签收":"2020-135"}',style: TextStyle(
                    color: result?rgba(95, 142, 255, 1):rgba(153, 153, 153, 1),
                    fontSize: 16
                ),),
                alignment: Alignment.centerLeft,
              )
            ],
          ),
          Row(
            children: [
              buildLine(height: 50),//线条
              SizedBox(width: 10,),
              //右侧字体
              Expanded(child:Container(
                child: Text('签收人签收信息签收人签收信息签收人签收信息签收人签收信息签收人签收信息签收人签收信息',style: TextStyle(
                    color: result?rgba(51, 51, 51, 1):rgba(153, 153, 153, 1),
                    fontSize: 14
                ),),
                alignment: Alignment.centerLeft,
              ),),
            ],
          ),
        ],
      ),
    );
  }


  //物流线条
  // height 线条总高度
  // line:每一个线条高度
  //margin:每个线条间隔
  //width:线条总宽度
  //lineWidth:线条宽度
  buildLine({double height:50,double line:5,double margin:3,double width:1}){
    int length =(height/line+margin).ceil();
    return Container(
      width: leftWidth,//当前线条需要的总宽度
      child: Container(
        width: 12,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: List.generate(length, (index) => Container(
            width: width,
            height: line,
            color: rgba(204, 204, 204, 1),
            margin: EdgeInsets.symmetric(vertical: margin),
          ),
          ),
        ),
      ),
    );
  }


  //圆点
  buildCircle(bool result){
    return Container(
      child: result?Icon(Icons.check):Center(
        child: Container(
          alignment: Alignment.center,
          width: 12,
          height: 12,
          decoration: BoxDecoration(
              color: rgba(204, 204, 204, 1),
              borderRadius: BorderRadius.circular(50)
          ),
        ),
      ),
      width: leftWidth,
    );
  }


  Color rgba(r,g,b,double opacity){
    return Color.fromRGBO(r,g,b,opacity);
  }

}