Flutter 如何设计具有固定时间和可变事件的颤振时间轴小部件

我在《颤栗》中制作了一个垂直的时间轴，但在如何设计时间轴和事件系统方面遇到了障碍。下面的图片是我所拥有的以及我希望它显示的方式。黄色容器是事件，事件可以位于任意一侧，并与其他事件重叠。目前，它是一列中的三行，两边展开，中间固定宽度。每个点都是自己的小部件，带有与之关联的日期时间

现在我的问题是，我如何使事件与基于日期时间的中心编号对齐？ 我目前正在使用带有top的事件上定位的，但我无法获得与中心窗口小部件顶部的距离

主版本

child: Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          _buildLeftCol(),
          _buildCenterCol(CustomTime().times),
          _buildRightCol(12)
        ],
      ),
    )
  ],
),

Widget\u buildCenterCol（列表）{
返回列（子项：list.map（（time）=>timeItem（time））.toList（））；
}
小部件时间项（日期时间）{
如果（time.minute！=00）{
返回填充(
填充：仅限常量边集（顶部：8.0，底部：8.0），
孩子：ClipRRect(
边界半径：边界半径。圆形（9.0），
子：容器(
身高：18，
宽度：18，
颜色：颜色（0xFF0288D1），
),
),
);
}否则{
返回ClipRRect(
边界半径：边界半径。圆形（32.0），
子：容器(
身高：64，
宽度：64，
颜色：颜色（0xFF00305A），
子：居中（子：文本（日期格式（'HH'）。格式（时间），样式：文本样式（颜色：Colors.white，fontSize:32.0），）
)
);
}
}

您可以尝试最近发布的软件包。目前，它不提供虚线，但您可以很容易地通过其平铺实现所需，例如：

TimelineTile(
  alignment: TimelineAlign.center,
  rightChild: Container(
    constraints: const BoxConstraints(
      minHeight: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  leftChild: Container(
    color: Colors.amberAccent,
  ),
);

如果对齐

居中

os

手动

两侧都可以有子对象

---

此外，存储库还包含一些使用此软件包构建的示例。

您的逻辑是正确的，您需要使用堆栈和定位，并且您已经这样做了。。。你能分享堆栈的代码吗？如果16也有数据会发生什么？如果数据量很大呢？添加了一些小部件的代码，这可能有点像意大利面条，因为我已经为这个问题挣扎了几天，现在断断续续地进行大量的代码编辑@RémiRousselet如果数据重叠，它会被推到另一侧，如果数据重叠，它会被推到另一侧。不会有太多的数据。因为事件是连续的。数据将为图像/象形图和标题。例如，吃晚餐。不，兄弟，如果你想玩这些小部件，并将它们放在任何你想放的地方（例如，放在彼此的顶部），你就犯了一个错误，你需要让它们都成为堆栈小部件的一部分，这样那些蓝色和深蓝色的点也应该在它们的内部stack@othman我一开始就是这样的，问题不在于知道每个“点小部件”的位置在哪里。起初，我尝试在每一列中为每个timeItem设置一行。然后对事件使用堆栈。这与定位有关，但事件小部件将位于它下面的一行后面。

Widget _buildEventItem(DateTime time) {

  var index = CustomTime().getIndexOf(time);
  var position = 41.0 * index;

  return Positioned(
    left: 160,
    top: position,
    child: Container(
      width: 200,
      height: 200,
      color: Colors.yellow,
      child: Text("data")
    ),
  );
}

Widget _buildCenterCol(List<DateTime> list) {
  return Column(children: list.map((time) => timeItem(time)).toList());
}

Widget timeItem(DateTime time) {
  if(time.minute != 00) {
    return Padding(
      padding: const EdgeInsets.only(top:8.0, bottom: 8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(9.0),
        child: Container(
          height: 18,
          width: 18,
          color: Color(0xFF0288D1),
        ),
      ),
    );
  } else {
    return ClipRRect(
      borderRadius: BorderRadius.circular(32.0),
      child: Container(
        height: 64,
        width: 64,
        color: Color(0xFF00305A),
        child: Center(child: Text(DateFormat('HH').format(time), style: TextStyle(color: Colors.white, fontSize: 32.0),))
      )
    );
  }
}

TimelineTile(
  alignment: TimelineAlign.center,
  rightChild: Container(
    constraints: const BoxConstraints(
      minHeight: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  leftChild: Container(
    color: Colors.amberAccent,
  ),
);