Flutter 时间线

最新推荐文章于 2024-05-23 09:52:25 发布
最新推荐文章于 2024-05-23 09:52:25 发布
阅读量589 收藏 3
点赞数
分类专栏： flutter 时间线 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012029712/article/details/115363202
版权

需求

电商网站常会用到的物流时间线
在这里插入图片描述

方法一

利用Stack做，一层渲染，一层渲染列表和表示状态的圆点
注意点1：因为Stack的高度约束是0~infinity,默认子Container高度为0，设置top、bottom后才能显示
注意点2：text需要包裹Expanded，否则无法换行
注意点3：最外层要包裹Column，Stack高度会随子集变化而变化，否则高度会占满整个屏幕

import 'package:flutter/material.dart';

class DateLine extends StatelessWidget {

  final List textList = [
    '[收货地址]浙江省宁波市鄞州区 中河街道 甬兴西路甬兴新村 185****4512',
    '您的快件已暂存至宁波市甬兴新村菜鸟驿站，您的快件已暂存至宁波市甬兴新村菜鸟驿站，请及时取件有问题请联系请及时取件有问题请联系',
    '[宁波市]宁波市鄞州区的李XXXXXX[]正在派件',
    '[宁波市]快件已到达宁波鄞州区',
    '[宁波市]快件已到达宁波鄞州区',
    '商品已下单',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('时间线'),),
      body: Column(children: [
        Padding(padding: EdgeInsets.all(15),
            child: Stack(children: [
              //线
              Positioned(left: 10,top: 10,bottom: 0,//重点，因为Stack的高度约束是0~infinity,默认子Container高度为0，设置top、bottom后才能显示
                child: Container(width: 1,color: Colors.red,),),
              //列表
              Column(crossAxisAlignment: CrossAxisAlignment.start,children: List.generate(6, (index){
                return Container(padding: EdgeInsets.only(bottom: 20),child: Column(children: [
                  Row(crossAxisAlignment: CrossAxisAlignment.start,children: [
                    //状态圆点
                    Container(width: 20,height: 20,alignment: Alignment.center,
                      child: Container(width: 12,height: 12,decoration: BoxDecoration(borderRadius: BorderRadius.circular(6),color: Colors.yellow),),),
                    SizedBox(width: 5,),
                    //文字信息
                    Expanded(child: Text(this.textList[index],style: TextStyle(color: Colors.grey,fontSize: 14),)),
                  ],),
                  SizedBox(height: 5,),
                  Row(children: [
                    SizedBox(width: 25,),
                    Text('2021-12-28 13:56:25',style: TextStyle(color: Colors.grey,fontSize: 12),)
                  ],)
                ],),);
              }),)
            ],)
        ),
      ],),
    );
  }
}

效果
在这里插入图片描述
待解决问题
最后一个子集有线条露出

方法一改

解决最后一个子集有线条露出问题。
为最后一个子集创建Stack，遮盖线条

import 'package:flutter/material.dart';

class DateLine extends StatelessWidget {

  final List textList = [
    '[收货地址]浙江省宁波市鄞州区 中河街道 甬兴西路甬兴新村 185****4512',
    '您的快件已暂存至宁波市甬兴新村菜鸟驿站，您的快件已暂存至宁波市甬兴新村菜鸟驿站，请及时取件有问题请联系请及时取件有问题请联系',
    '[宁波市]宁波市鄞州区的李XXXXXX[]正在派件',
    '[宁波市]快件已到达宁波鄞州区',
    '[宁波市]快件已到达宁波鄞州区',
    '商品已下单',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('时间线'),),
      body: Container(color: Colors.white,
        child: Column(children: [
          Padding(padding: EdgeInsets.all(15),
              child: Stack(children: [
                //线
                Positioned(left: 10,top: 10,bottom: 0,//重点，因为Stack的高度约束是0~infinity,默认子Container高度为0，设置top、bottom后才能显示
                  child: Container(width: 1,color: Colors.red,),),
                //列表
                Column(crossAxisAlignment: CrossAxisAlignment.start,children: List.generate(this.textList.length, (index){
                  if(index == this.textList.length - 1){
                    //最后一个节点
                    return Stack(children: [
                      Container(padding: EdgeInsets.only(bottom: 20),child: Column(children: [
                        Row(crossAxisAlignment: CrossAxisAlignment.start,children: [
                          //状态圆点
                          Container(width: 20,height: 20,alignment: Alignment.center,
                            child: Container(width: 8,height: 8,decoration: BoxDecoration(borderRadius: BorderRadius.circular(6),color: Colors.yellow),),),
                          SizedBox(width: 5,),
                          //文字信息
                          Expanded(child: Text(this.textList[index],style: TextStyle(color: Colors.grey,fontSize: 14),)),
                        ],),
                        SizedBox(height: 5,),
                        Row(children: [
                          SizedBox(width: 25,),
                          Text('2021-12-28 13:56:25',style: TextStyle(color: Colors.grey,fontSize: 12),)
                        ],)
                      ],),),
                      Positioned(top: 14,bottom: 0,child: Container(width: 20,color: Colors.white,))
                    ],);
                  }else{
                    return Container(padding: EdgeInsets.only(bottom: 20),child: Column(children: [
                      Row(crossAxisAlignment: CrossAxisAlignment.start,children: [
                        //状态圆点
                        Container(width: 20,height: 20,alignment: Alignment.center,
                          child: Container(width: 8,height: 8,decoration: BoxDecoration(borderRadius: BorderRadius.circular(6),color: Colors.yellow),),),
                        SizedBox(width: 5,),
                        //文字信息
                        Expanded(child: Text(this.textList[index],style: TextStyle(color: Colors.grey,fontSize: 14),)),
                      ],),
                      SizedBox(height: 5,),
                      Row(children: [
                        SizedBox(width: 25,),
                        Text('2021-12-28 13:56:25',style: TextStyle(color: Colors.grey,fontSize: 12),)
                      ],)
                    ],),);
                  }

                }),)
              ],)
          ),
        ],),
      ),
    );
  }

}

最终效果
在这里插入图片描述

方法二

利用边框做线，Stack绘制状态圆点

import 'package:flutter/material.dart';

class DateLine extends StatelessWidget {

  final List textList = [
    '[收货地址]浙江省宁波市鄞州区 中河街道 甬兴西路甬兴新村 185****4512',
    '您的快件已暂存至宁波市甬兴新村菜鸟驿站，您的快件已暂存至宁波市甬兴新村菜鸟驿站，请及时取件有问题请联系请及时取件有问题请联系',
    '[宁波市]宁波市鄞州区的李XXXXXX[]正在派件',
    '[宁波市]快件已到达宁波鄞州区',
    '[宁波市]快件已到达宁波鄞州区',
    '商品已下单',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('时间线'),),
      body: Container(color: Colors.white,
        child: Column(children: List.generate(this.textList.length, (index){
          return Container(width: double.infinity,child: Stack(children: [
            Container(padding: EdgeInsets.only(left: 20,bottom: 25),margin: EdgeInsets.only(left: 20),
              //绘制边框线，最后一个不绘制
              decoration: BoxDecoration(border: Border(left: BorderSide(color: index == this.textList.length - 1 ? Colors.white : Colors.blue,width: 1))),
              child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [
                Text(this.textList[index],style: TextStyle(color: Colors.grey,fontSize: 12),),
                SizedBox(width: 25,),
                Text('2021-12-28 13:56:25',style: TextStyle(color: Colors.grey,fontSize: 10),)
              ],),
            ),
            //状态圆点
            Positioned(left: 12.5,top: 0,
              child: Container(width: 15,height: 15,decoration:   BoxDecoration(borderRadius: BorderRadius.circular(20),color: Colors.yellow),),
            ),
          ],),);
        }),),
      )
    );
  }

}

效果
在这里插入图片描述

待解决问题
当圆点直径和文字的高度一致时，效果最好
当圆点直径小于文字的高度，如果不给圆点加top,与文字垂直上无法对其,如果加上top，第一个圆点上线条会冒尖，最后一个圆点上会有一部分空缺
当圆点直径大于文字的高度，与文字无法对其
请大佬赐教。

鱼欲语雨
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
timelines:功能强大且易于使用的Flutter时间轴包！ :rocket:
03-31
功能强大且易于使用的Flutter时间轴包！ :rocket: 警告：此程序包尚处于初期阶段。 没有足够的测试来确保稳定性。 某些API可能会更改。 例子 在上查看它或查看。 时间轴状态 包裹运送追踪 流程时间表 更多例子 :construction: 在制品 :construction: 特征 和每个都是WIDGET。 通用样式可以通过预定义的组件轻松实现。 垂直，水平方向。 交替内容。 与Flutter小部件（行，列，CustomScrollView等）组合。 使用主题自定义每个范围。 入门 安装 1.依赖它 将此添加到包的pubspec.yaml文件中： dependencies : timelines : ^[latest_version] 2.安装 您可以从命令行安装软件包： 使用Flutter： $ flutter pub get 或者，您的编辑器可能支持flutter pub get。 检查您的编辑器的文档以了
Flutter时间轴（timeline）
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
11-16 3966
组件 在业务开发中经常会使用到timeline时间轴，来记录数据操作记录等，在这本人封装了一个相对较通用的时间轴组件。 示例 参数 参数 类型 必填 说明 timelineList List 是 时间轴数据 lineColor Color 是 时间轴轴线颜色 height double 否 时间轴右侧容器高度（默认80） titleStyle TextStyle 否 时间轴标题样式（已定义初始值 如无特殊样式无需传参） subtitleStyle TextStyle 否
探索未来时间轴：强大的Flutter时间线库Timelines
gitblog_00080的博客
05-18 396
探索未来时间轴：强大的Flutter时间线库Timelines 项目地址:https://gitcode.com/chulwoo-park/timelines 当我们在构建可视化界面时，时间线是一种强大的工具，能够清晰地呈现事件序列或进度流程。今天，我们向您推荐一个由Chulwoo Park开发的出色开源项目——Timelines，它是一个专为Flutter设计的强大且易于使用的时间线库。 项目介...
Flutter 自定义实现时间轴、侧边进度条
weixin_43740011的博客
06-19 2004
以上就是实现 Flutter 自定义时间轴和侧边进度条的步骤。这两个控件都可以为应用程序增加更好的视觉效果和交互体验。希望本文对你有所帮助！如果你有任何问题或建议，请在下方留言。
Flutter时间轴
大灰狼的小绵羊哥哥的博客
11-27 1450
一，真实点,直接上图吧。 github地址视频教学地址 1.位置，上图可见,时间轴可以在左边，也可以在中间，当然了可以在任何位置。2.时间轴样式，当然了我们时间轴比仅仅限制为一个圆圈是吧,当然了你的部件能写多炫酷，砸门的时间轴也可以,上图（圆里面爱，图片，黄色背景文字，其实都是一长串部件）。3.线，我们需要和内容的高度一样，这里估计是很多人的痛点，没法自适应，这里也做到了。线的粗细，颜色，虚线间隔，渐变...当然砸门也实现了 二 ,看一眼吧 如何实现。 群里很多人都需要一个时间轴，对于时间轴自
Flutter实现的时间轴
08-10
在Flutter中实现时间轴，我们需要创建一个自定义的Widget，这个Widget能够绘制出具有时间线和时间点的布局。以下是一些关键步骤和知识点： 1. **理解Widget结构**： Flutter中的UI构建基于Widget树。我们首先需要...
flutter_feed_timeline:颤振进给时间轴线程
05-10
实时时间表 推送通知 用图片发布文字 变更个人资料信息 撰写评论并回复评论。 [！] Gradle没有执行权限。 您应将项目目录的所有权更改为您的用户，或将项目移至具有执行权限的目录。 Gradle任务assembleDebug失败...
flutter版本你的k线图 iOS
04-06
【标题】"Flutter版K线图在iOS平台的应用" 【正文】 在移动应用开发领域，Flutter作为Google推出的跨平台框架，已经逐渐获得了开发者们的青睐。它以其高效的开发速度、丰富的UI组件库以及一致的用户体验而著称。在...
Flutter抛物线动画实例.zip 加入购物车动画
01-25
本实例将重点讲解如何在Flutter中实现一个“加入购物车”的抛物线动画。 在Flutter中，动画主要通过`Animation`和`AnimatedBuilder`类来实现。`Animation`对象负责控制动画的状态，而`AnimatedBuilder`则用于构建...
flutter物流纵向时间轴布局
androidhyf的博客
06-19 397
flutter物流时间轴
Flutter Stepper 步骤
10-21
Flutter Stepper 步骤
两个很强大的js实现的时间轴
09-05
有很多要求以时间为变量来标记事件的，这里有两个很好的开源js库，一大一小(timeglider,chronoline)。 但有个共同的缺点时间都只精确到天为单位。 个人把chronoline改成精确到分,但还不是很完善，如有需要的同鞋可以向我要...
Flutter DateTime日期转换
10-06
主要介绍日期时间戳、加、减、比较等。
日期时间滑动选择插件mobiscroll
02-27
日期时间滑动选择插件，类似原生效果。特别是移动端的混合开发，当你调不到原生日期时间滑动选择插件时，贼管用
简单实现一下Flutter的Stepper做一个侧边进度条
weixin_34187862的博客
03-22 624
因为 flutter 提供的 Stepper 无法满足业务需求，于是只好自己实现一个了 flutter Stepper 的样式 我实现的 Stepper 这个或许根本不叫 Stepper 吧，也没有什么步骤，只是当前的配送进度，不需要数字步骤，希望所有内容都能显示出来，原生的则是有数字表示第几步，把当前步骤外的其他的内容都隐藏了。 那么开始进行分析，整个需求中，有点难度的也就是这个左边的进度线...
Flutter实现Timeline（时间轴）
zhuangch的专栏
11-27 8822
Flutter实现Timeline（时间轴） 首先看看时间轴效果图 实现的难点就是左边的时间线，右边的事件说白了就是一个ListView，仔细观察一下会发现圆圈在ListView的一个item上，想明白这些我们就可以把圆圈和右边的事件作为一个listitem实现，左边的竖线可以有两种实现方法 1）listItem是一个Row，Row里含有一条竖线 2）Stack实现，Stack有两个child ...
Flutter时间轴-首个
Stay hungry, stay foolish!!
06-25 5336
一，真实点,直接上图吧。 github地址 视频教学地址 1.位置，上图可见,时间轴可以在左边，也可以在中间，当然了可以在任何位置。 2.时间轴样式，当然了我们时间轴比仅仅限制为一个圆圈是吧,当然了你的部件能写多炫酷，砸门的时间轴也可以,上图（圆里面爱，图片，黄色背景文字，其实都是一长串部件）。 3.线，我们需要和内容的高度一样，这里估计是很多人的痛点，没法自适应，这里也做到了。线的粗细，颜色...
推荐使用：Flutter Timeline Widget - 创新时间轴布局解决方案
最新发布
gitblog_00063的博客
05-23 416
推荐使用：Flutter Timeline Widget - 创新时间轴布局解决方案 项目地址:https://gitcode.com/furkantektas/timeline_list 在构建用户界面时，时间轴（Timeline）是一种优雅且直观的展示数据的方式，它可以帮助用户更好地理解事件的序列和顺序。今天，我们要向您推荐一个专为Flutter开发者设计的强大开源库——Flutter Tim...
用flutter 实现时光轴
04-01
时光轴是一种将历史事件按时间线展示的方式。在Flutter中，可以通过使用ListView和Card来实现一个简单的时光轴。以下是一个示例： 1. 创建一个Flutter应用程序并打开main.dart文件。 2. 导入material.dart库并创建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值