[Flutter]带日历插件的时间轴效果

功能描述

Flutter实现时间轴效果，同时带日历插件，通过选择日期回调实现底部时间轴渲染。

时间轴

技术解析

Stack可以在一个基础小部件上排列其他小部件，这些小部件可以全部或者部分覆盖基础小部件，其他小部件实现在基础小部件上的绝对定位。

Stack应用：

• 用于一个或者多个小部件覆盖另一个小部件
• Stack孩子小部件中的一个孩子组件作为基础小部件，后边的所有孩子小部件覆盖这个基础小部件
• Stack中的内容不能滚动
• 可以选择剪切溢出到渲染盒子外的孩子小部件

代码片段

Stack的第一个孩子小部件，渲染具体内容，此处用Card显示事件内容，可以根据具体需要任何其他小部件， EdgeInsets.only(left: 50.0)将具体内容左侧加padding给时间轴留出空间。

Padding(
  padding: EdgeInsets.only(left: 50.0),
  child: Card(
    margin: EdgeInsets.all(20.0),
    child: Container(
     padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
      width: double.infinity,
      child: Text('hello world'),
    ),
  ),
),

Stack的第二个孩子小部件，渲染时间轴的连线，通过Positioned进行绝对定位

Positioned(
  top: 0.0,
  bottom: 0.0,
  left: 35.0,
  child: Container(
    height: double.infinity,
    width: 1.0,
    color: Colors.blue,
  ),
),

第三个小部件同样通过Positioned进行绝对定位，同时，将两个Container嵌套一起实现圆环效果，margin: EdgeInsets.all(3.0), 确定外围圆环宽度。

Positioned(
  top: 13.0,
  left: 22.5,
  child: Container(
    height: 26.0,
    width: 26.0,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.yellow,
    ),
    child: Container(
      margin: EdgeInsets.all(3.0),
      height: 26.0,
      width: 26.0,
      decoration:
          BoxDecoration(shape: BoxShape.circle, color: Colors.red),
    ),
  ),
)

顶部日历组件
顶部日历组件通过flutter_calendar实现，onDateSelected 方法是选择日期后的回调函数

Calendar(
    onSelectedRangeChange: (range) =>
        print("Range is ${range.item1}, ${range.item2}"),
    onDateSelected: (date) => handleNewDate(date),
),

源码

点击Github源码浏览下载本示例完整源码