Flutter时间轴-首个

最新推荐文章于 2024-08-20 08:43:27 发布

原创

最新推荐文章于 2024-08-20 08:43:27 发布 · 置顶 · 5.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter时间轴 #Flutter自适应高度时间轴 #Flutter丰富时间轴 #Flutter最棒时间轴 #666时间轴

本文介绍了如何在Flutter中创建一个自适应高度的时间轴组件，通过CustomPaint绘制时间线，实现了高度灵活的定制。提供了GitHub仓库链接和视频教学资源，帮助开发者轻松实现时间轴效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，真实点,直接上图吧。

github地址
 视频教学地址
在这里插入图片描述

1.位置，上图可见,时间轴可以在左边，也可以在中间，当然了可以在任何位置。
2.时间轴样式，当然了我们时间轴比仅仅限制为一个圆圈是吧,当然了你的部件能写多炫酷，砸门的时间轴也可以,上图（圆里面爱，图片，黄色背景文字，其实都是一长串部件）。
3.线，我们需要和内容的高度一样，这里估计是很多人的痛点，没法自适应，这里也做到了。线的粗细，颜色，虚线间隔，渐变...当然砸门也实现了

二 ,看一眼吧如何实现。

群里很多人都需要一个时间轴，对于时间轴自适应高度难倒了很多人。当然了，我试着搞了搞，搞了两种思路， 
第一种有点low但是也能实现。我们知道Container是一个部件，它有一个decoration属性里面又一个  
boder,而且boder可以设置left,top,right,bootom等让其显示。

代码如下：

 return Scaffold(
      body: ListView.builder(
        itemCount:10,
        itemBuilder:(context,index){
          return   Column(
            crossAxisAlig