快捷導(dǎo)航

Flutter時(shí)間軸Timeline的實(shí)現(xiàn)

更新時(shí)間：2021年05月19日 10:52:45 作者：zhuangch

時(shí)間軸在很多地方都可以用的到，本文介紹了Flutter時(shí)間軸Timeline的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

首先看看時(shí)間軸效果圖

在這里插入圖片描述

實(shí)現(xiàn)的難點(diǎn)就是左邊的時(shí)間線，右邊的事件說白了就是一個(gè)ListView，仔細(xì)觀察一下會(huì)發(fā)現(xiàn)圓圈在ListView的一個(gè)item上，想明白這些我們就可以把圓圈和右邊的事件作為一個(gè)listitem實(shí)現(xiàn)，左邊的豎線可以有兩種實(shí)現(xiàn)方法

1）listItem是一個(gè)Row，Row里含有一條豎線
2）Stack實(shí)現(xiàn)，Stack有兩個(gè)child widget，一個(gè)是豎線，一個(gè)是ListView

本文簡單用第二種來實(shí)現(xiàn)它，廢話少說先上代碼

@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怎么實(shí)現(xiàn)左邊的圓圈
直接看代碼

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方法有點(diǎn)長，但實(shí)現(xiàn)圓圈的代碼很少

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

坐標(biāo)的計(jì)算就是通過左邊豎線的x坐標(biāo) - 圈圈的半徑獲得，至此我們就實(shí)現(xiàn)了簡單的timeline

到此這篇關(guān)于Flutter時(shí)間軸Timeline的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Flutter時(shí)間軸內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: