Flutter时间轴Timeline的实现

更新时间：2021年05月19日 10:52:45 作者：zhuangch

时间轴在很多地方都可以用的到，本文介绍了Flutter时间轴Timeline的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

首先看看时间轴效果图

在这里插入图片描述

实现的难点就是左边的时间线，右边的事件说白了就是一个ListView，仔细观察一下会发现圆圈在ListView的一个item上，想明白这些我们就可以把圆圈和右边的事件作为一个listitem实现，左边的竖线可以有两种实现方法

1）listItem是一个Row，Row里含有一条竖线
2）Stack实现，Stack有两个child widget，一个是竖线，一个是ListView

本文简单用第二种来实现它，废话少说先上代码

@override
  Widget build(BuildContext context) {
    return Card(
      elevation: 0,
      margin: EdgeInsets.symmetric(horizontal: 15, vertical: 50),
      child: Stack(
        fit: StackFit.loose,
        children: <Widget>[
          // 左边的竖线
          Positioned(
            left: 21,
            top: 15,
            bottom: 15,
            child: VerticalDivider(
              width: 1,
            ),
          ),
          // 右边的事件列表
          ListView.separated(
            padding: EdgeInsets.zero,
            itemCount: events.length,
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              return FlowEventRow(events[index]);
            },
            separatorBuilder: (BuildContext context, int index) {
              return Divider(
                height: 1,
                indent: 45,
              );
            },
          ),
        ],
      ),
    );
  }

代码很简单我就不作过多解释，主要来解释下事件行FlowEventRow怎么实现左边的圆圈
直接看代码

class FlowEvent {
  const FlowEvent({
    this.advise,
    @required this.date,
    @required this.author,
    this.isCompleted = true,
  });

  final String advise;
  final DateTime date;
  final bool isCompleted;
  final String author;

  bool get hasAdvise =>
      isCompleted && advise != null ? advise?.isNotEmpty : false;
}

@immutable
class FlowEventRow extends StatelessWidget {
  const FlowEventRow(this.event);

  final FlowEvent event;

  double get circleRadius => event.isCompleted ? 8 : 6;
  Color get circleColor =>
      event.isCompleted ? const Color(0xFF40BE7F) : const Color(0xFFD5D5D5);

  @override
  Widget build(BuildContext context) {
    final Color dimColor = const Color(0xFFC5C5C5);
    final Color highlightColor = const Color(0xFF40BE7F);

    return Padding(
      padding: EdgeInsets.symmetric(vertical: 10),
      child: Row(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 22.0 - circleRadius),
            child: Container(
              width: circleRadius * 2,
              height: circleRadius * 2,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: circleColor,
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: EdgeInsets.only(left: 0, right: 15),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Text(
                          '制单',
                          style: TextStyle(
                            fontSize: 13,
                            color:
                                event.isCompleted ? highlightColor : dimColor,
                          ),
                        ),
                      ),
                      Text(
                        DateUtils.formatDay(event.date, withHms: true),
                        style: Theme.of(context)
                            .textTheme
                            .caption
                            .copyWith(color: dimColor),
                      )
                    ],
                  ),
                  ...event.hasAdvise
                      ? [
                          SizedBox(
                            height: 4,
                          ),
                          Text(
                            event.advise ?? '',
                            style: Theme.of(context)
                                .textTheme
                                .body1
                                .copyWith(fontSize: 12),
                          )
                        ]
                      : [],
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

build方法有点长，但实现圆圈的代码很少

Padding(
            padding: EdgeInsets.symmetric(horizontal: 22.0 - circleRadius),
            child: Container(
              width: circleRadius * 2,
              height: circleRadius * 2,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: circleColor,
              ),
            ),
          ),

坐标的计算就是通过左边竖线的x坐标 - 圈圈的半径获得，至此我们就实现了简单的timeline

到此这篇关于Flutter时间轴Timeline的实现的文章就介绍到这了,更多相关Flutter时间轴内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

android 设置闹钟及通知示例
本篇文章主要介绍了android 设置闹钟及通知示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
Android 多渠道打包进阶版
上篇文章更了Android 多渠道打包，这篇文章将做一个后续继续更Android 多渠道打包进阶版，上次意未尽的朋友可以继续啦，第一次点进来的朋友也可以看上次文章
2021-09-09
Android CoordinatorLayout详解及实例代码
这篇文章主要介绍了Android CoordinatorLayout详解及实例代码的相关资料,CoordinatorLayout基本实现两个功能：作为顶层布局和调度协调子布局，这里详细介绍此部分知识，需要的朋友可以参考下
2016-12-12
Android持久化技术之文件的读取与写入实例详解
这篇文章主要介绍了Android持久化技术之文件的读取与写入操作,结合实例形式较为详细的分析讲述了Android持久化操作的相关技巧与具体实现方法,需要的朋友可以参考下
2016-01-01
Android AES加密工具类分享
这篇文章主要介绍了Android AES加密工具类分享,本文给出了实现代码和使用例子,本文使用PKCS5Padding加密方式实现,需要的朋友可以参考下
2014-10-10
android bitmap compress(图片压缩)代码
android bitmap compress(图片压缩)代码，需要的朋友可以参考一下
2013-06-06
浅谈关于Android路由的实现
本篇文章主要介绍了浅谈关于Android路由的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
聊聊Android中的事件分发机制
这篇文章主要介绍了Android中的事件分发机制的相关资料，帮助大家更好的理解和学习使用Android，感兴趣的朋友可以了解下
2021-04-04
浅谈Volley加载不出图片的问题
下面小编就为大家带来一篇浅谈Volley加载不出图片的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
详解Android(共享元素)转场动画开发实践
本篇文章主要介绍了详解Android(共享元素)转场动画开发实践，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-08-08